Css 命名规则思考
掘金安东尼 2019-09-04
CSS
# Weird-Css
写class的时候,不愿意频繁在dom和style之间切换,懒到甚至不想在比如vue这种模板里滑上滑下(template 和 style 之间)
但是一些框架的样式又记不住
干脆自己随意整理,希望找出规律,使Class名即样式
e.g.
mt20 => margin-top:20px (备注:px可替换成其它单位)
1
2
3
2
3
# width/height
class name | style |
---|---|
width10 | width:10px; |
width10p | width:10%; |
width10vw | width:10vw; |
height类比同上
# margin/padding
class name | style |
---|---|
m0a | margin: 0 auto; |
mt10 | margin-top:10px; |
mr10 | margin-right:10px; |
mb10 | margin-bottom:10px; |
ml10 | margin-left:10px; |
m-0-10 | margin:0px 10px; |
padding类比同上
我们可以看出:
- 不带单位的情况下,为默认单位,带单位则为指定单位:e.g. mr2vw => margin-right:2vw
- 值为负数则加符号:e.g. mr-2vw => margin-right:-2vw
- 加权重:e.g. mr-2vw-im => margin-right:-2vw!important
再来
# color/background-color
class name | style |
---|---|
color6c8efa | color:#6c8efa; |
color-6c8efa | color:#6c8efa; |
colorfff | color:#fff; |
bgc-fff | background-color:#fff; |
- color6c8efa和color-6c8efa都指向color:#6c8efa;
# position/text-align
class name | style |
---|---|
positionA | position:absolute; |
positionR | position:relative; |
text-alignC | texte-align:center; |
text-alignR | texte-align:right; |
text-alignL | texte-align:left; |
# font-size
class name | style |
---|---|
font-size16 | font-size:16px; |
继续
# more
class name | style |
---|---|
z-index999 | ? |
t55 | ? |
答案是
class name | style |
---|---|
z-index999 | z-index:999 |
t55 | top:55px |
当然,如果针对特定业务功能的组件,也建议集成写到style里面,比如统一风格的btn等等。这只是提供另外一种写法!