面向属性的CSS命名

作者: 前端知识  发布:2019-08-08

面向属性的CSS命名

2016/06/06 · CSS · 命名

原来的书文出处: 流云诸葛   

自打初步做前端开拓以来,小编意识在开采页面包车型大巴时候,总是有叁个主题材料非常震慑本人的开拓功效,那些题目就是css的命名,首如果指css类选取器的命名。那些问题关键反映在:第一,有的内容你压根想不出用怎么样名字来给它定名,因为一般命名总是考虑语义化,好让别的人来看那一个css类的名字就知道它是效果与利益于哪一个内容的,不过由于网页内容的目迷五色和多样性,你很难保障每一个部分都能起一个合适的名字,固然你最后万般无奈想出了一个名字,也许有其一名字是或不是是最合适的这种融合存在,而且最特别的是,那个命名的经过是一项极其麻烦的脑子活动,会消耗掉很多脑部细胞,这一件很不值得的作业;第二,由于命名的时候是语义化的命名,那或多或少或然会阻止css代码的重用,比方说某叁个网页的源委用.title来描述它的体制,那么些title蕴涵了2条法规,{font-size: 14px; line-height: 20px},此时网页的另叁个内容或许必要跟那些title具有一模二样的体裁,可是从另三个内容所处的网页地点来讲,可能用.desc来定名才是更确切的取舍,今年,笔者信任喜欢语义化命名的人自然会把非常内容再单独起二个css类desc,然后把title的样式复制过来,结果就变成css文件中会存在两份相同的体制法规,只是命名差别而已,那样代码就再度了。

焚薮而田这么些题指标秘技正是采纳面向属性的css命名,把那个大家实际上想不有名字的,况且从不须求起名字的,何况能够只用单一的css属性也许组合的单一css属性来描述的有个别,通通都用面向属性的css类来支配样式,让您从烦乱的css命名的漩涡中通透到底解放出来,除了抓好你的工作成效,最要紧的是压缩你脑部细胞的损耗,令你不会那么麻烦。

第一要注解,面向属性的css命名那几个思考不是笔者的原创,它出自于张鑫旭的博客。自个儿是当下可比纠结于css的命名难点,然后找到了她的两篇小说,对自己重新认识css的命名以及怎么样组织全站的css有为数非常多的相助,这两篇小说分别是:
简洁高效的CSS命名法则/方法
自己是怎么对网址CSS实行架构的
您能够先去通过她的稿子领会这一个命名观念的发源,再回到看本人的局地计算跟应用。

@charset "utf-8";

取超情势

以此点子,简单来说,正是一贯以css属性简写作为css的类名,在运用的时候,通过运用贰个或结成多个这么的简写方式的css类来达到调节样式的目标。比如说网页中有四个网页内容,是一段居中的文本,大小为12px,行高为20px,段前后间隔分别为10px和15px,那么就足以定义一下那些总结的属性类:

CSS

.tc {text-align: center;} .f12 {font-size: 12px;} .lh20 {line-height: 20px;} .mt10 {margin-top: 10px;} .mtb15 {margin-bottom: 15px;}

1
2
3
4
5
.tc {text-align: center;}
.f12 {font-size: 12px;}
.lh20 {line-height: 20px;}
.mt10 {margin-top: 10px;}
.mtb15 {margin-bottom: 15px;}

在页面中动用的时候,直接组合以上这一个css属性类就能够:

XHTML

<p class="tc f12 lh20 mt10 mb15">…</p>

1
<p class="tc f12 lh20 mt10 mb15">…</p>

那就是这种属性命超级模特式的切实应用形式。

css中有成都百货上千的性质都能够动用这种方法来定名。在张鑫旭的博客中,他把自个儿的那套方法计算成了一个开源的css库:。大家能够先从她以此库来打探他自己是何许组织这一个分化的css属性类的,然后再来研究这里面包车型地铁一些主题材料。

那是她的开源库中,接纳面向属性命名的整个css类(以下代码仅是为了阅读本文方便才援引,倘使是想在骨子里职业中动用,最佳是关爱张鑫旭本身的github或许博客,因为她会不断地优化自个儿的事物):

CSS

/* display */ .dn{display:none;} .di{display:inline;} .db{display:block;} .dib{display:inline-block;} div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using 'inline_any' instead */ /* height */ .h0{height:0;} .h16{height:14px;} .h16{height:16px;} .h18{height:18px;} .h20{height:20px;} .h22{height:22px;} .h24{height:24px;} .h30{height:30px;} /* width */ /* fixed width value */ .w20{width:20px;} .w50{width:50px;} .w70{width:70px;} .w100{width:100px;} .w120{width:120px;} .w140{width:140px;} .w160{width:160px;} .w180{width:180px;} .w200{width:200px;} .w220{width:220px;} .w250{width:250px;} .w280{width:280px;} .w300{width:300px;} .w320{width:320px;} .w360{width:360px;} .w400{width:400px;} .w460{width:460px;} .w500{width:500px;} .w600{width:600px;} .w640{width:640px;} .w700{width:700px;} /* percent width value */ .pct10{width:10%;} .pct15{width:15%;} .pct20{width:20%;} .pct25{width:25%;} .pct30{width:30%;} .pct33{width:33.3%;} .pct40{width:40%;} .pct50{width:50%;} .pct60{width:60%;} .pct66{width:66.6%;} .pct70{width:70%;} .pct75{width:75%;} .pct80{width:80%;} .pct90{width:90%;} .pct100{width:100%;} /* line-height */ .lh0{line-height:0;} .lh16{line-height:14px;} .lh16{line-height:16px;} .lh18{line-height:18px;} .lh20{line-height:20px;} .lh22{line-height:22px;} .lh24{line-height:24px;} .lh30{line-height:30px;} /* margin */ .m0{margin:0;} .ml1{margin-left:1px;} .ml2{margin-left:2px;} .ml5{margin-left:5px;} .ml10{margin-left:10px;} .ml15{margin-left:15px;} .ml20{margin-left:20px;} .ml30{margin-left:30px;} .mr1{margin-right:1px;} .mr2{margin-right:2px;} .mr5{margin-right:5px;} .mr10{margin-right:10px;} .mr15{margin-right:15px;} .mr20{margin-right:20px;} .mr30{margin-right:30px;} .mt1{margin-top:1px;} .mt2{margin-top:2px;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mb1{margin-bottom:1px;} .mb2{margin-bottom:2px;} .mb5{margin-bottom:5px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;} .mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} /* margin negative */ .ml-1{margin-left:-1px;} .mr-1{margin-right:-1px;} .mt-1{margin-top:-1px;} .mb-1{margin-bottom:-1px;} .ml-3{margin-left:-3px;} .mr-3{margin-right:-3px;} .mt-3{margin-top:-3px;} .mb-3{margin-bottom:-3px;} .ml-20{margin-left:-20px;} .mr-20{margin-right:-20px;} .mt-20{margin-top:-20px;} .mb-20{margin-bottom:-20px;} /* padding */ .p0{padding:0;} .p1{padding:1px;} .pl1{padding-left:1px;} .pt1{padding-top:1px;} .pr1{padding-right:1px;} .pb1{padding-bottom:1px;} .p2{padding:2px;} .pl2{padding-left:2px;} .pt2{padding-top:2px;} .pr2{padding-right:2px;} .pb2{padding-bottom:2px;} .pl5{padding-left:5px;} .p5{padding:5px;} .pt5{padding-top:5px;} .pr5{padding-right:5px;} .pb5{padding-bottom:5px;} .p10{padding:10px;} .pl10{padding-left:10px;} .pt10{padding-top:10px;} .pr10{padding-right:10px;} .pb10{padding-bottom:10px;} .p15{padding:15px;} .pl15{padding-left:15px;} .pt15{padding-top:15px;} .pr15{padding-right:15px;} .pb15{padding-bottom:15px;} .p20{padding:20px;} .pl20{padding-left:20px;} .pt20{padding-top:20px;} .pr20{padding-right:20px;} .pb20{padding-bottom:20px;} .p30{padding:30px;} .pl30{padding-left:30px;} .pt30{padding-top:30px;} .pr30{padding-right:30px;} .pb30{padding-bottom:30px;} /* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/ .bdc{border:1px solid #ccc;} .blc{border-left:1px solid #ccc;} .brc{border-right:1px solid #ccc;} .btc{border-top:1px solid #ccc;} .bbc{border-bottom:1px solid #ccc;} .bdd{border:1px solid #ddd;} .bld{border-left:1px solid #ddd;} .brd{border-right:1px solid #ddd;} .btd{border-top:1px solid #ddd;} .bbd{border-bottom:1px solid #ddd;} .bde{border:1px solid #eee;} .ble{border-left:1px solid #eee;} .bre{border-right:1px solid #eee;} .bte{border-top:1px solid #eee;} .bbe{border-bottom:1px solid #eee;} /* background-color name rule: bg

  • (key word/Hex color) |-> All colors are safe color */ .bgwh{background-color:#fff;} .bgfb{background-color:#fbfbfb;} .bgf5{background-color:#f5f5f5;} .bgf0{background-color:#f0f0f0;} .bgeb{background-color:#ebebeb;} .bge0{background-color:#e0e0e0;} /* safe color */ .g0{color:#000;} .g3{color:#333;} .g6{color:#666;} .g9{color:#999;} .gc{color:#ccc;} .wh{color:white;} /* font-size */ .f0{font-size:0;} .f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} .f20{font-size:20px;} .f24{font-size:24px;} .f28{font-size:28px;} /* font-family */ .fa{font-family:Arial;} .ft{font-family:Tahoma;} .fv{font-family:Verdana;} .fs{font-family:Simsun;} .fl{font-family:'Lucida Console';} .fw{font-family:'Microsoft Yahei';} /* font-style */ .n{font-weight:normal; font-style:normal; white-space: normal;} .b{font-weight:bold;} .i{font-style:italic;} /* text-align */ .tc{text-align:center;} .tr{text-align:right;} .tl{text-align:left;} .tj{text-align:justify;} /* text-decoration */ .tdl{text-decoration:underline;} .tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;} /* letter-spacing */ .lt-1{letter-spacing:-1px;} .lt0{letter-spacing:0;} .lt1{letter-spacing:1px;} /* white-space */ .nowrap{white-space:nowrap;} /* word-wrap */ .bk{word-wrap:break-word;} /* vertical-align */ .vm{vertical-align:middle;} .vtb{vertical-align:text-bottom;} .vb{vertical-align:bottom;} .vt{vertical-align:top;} .v-1{vertical-align:-1px;} .v-2{vertical-align:-2px;} .v-3{vertical-align:-3px;} .v-4{vertical-align:-4px;} .v-5{vertical-align:-5px;} /* float */ .l{float:left;} .r{float:right;} /* clear */ .cl{clear:both;} /* position */ .rel{position:relative;} .abs{position:absolute;} /*z-index*/ .zx1{z-index:1;} .zx2{z-index:2;} /* cursor */ .poi{cursor:pointer;} .def{cursor:default;} /* overflow */ .ovh{overflow:hidden;} .ova{overflow:auto;} /* visibility */ .vh{visibility:hidden;} .vv{visibility:visible;} /* opacity */ .opa0{opacity:0; filer:alpha(opacity=0);} /* zoom */ .z{*zoom:1;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using 'inline_any' instead */
/* height */
.h0{height:0;}
.h16{height:14px;}
.h16{height:16px;}
.h18{height:18px;}
.h20{height:20px;}
.h22{height:22px;}
.h24{height:24px;}
.h30{height:30px;}
/* width */
/* fixed width value */
.w20{width:20px;}
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w360{width:360px;}
.w400{width:400px;}
.w460{width:460px;}
.w500{width:500px;}
.w600{width:600px;}
.w640{width:640px;}
.w700{width:700px;}
/* percent width value */
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}
/* line-height */
.lh0{line-height:0;}
.lh16{line-height:14px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}
.lh24{line-height:24px;}
.lh30{line-height:30px;}
/* margin */
.m0{margin:0;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
/* margin negative */
.ml-1{margin-left:-1px;}
.mr-1{margin-right:-1px;}
.mt-1{margin-top:-1px;}
.mb-1{margin-bottom:-1px;}
.ml-3{margin-left:-3px;}
.mr-3{margin-right:-3px;}
.mt-3{margin-top:-3px;}
.mb-3{margin-bottom:-3px;}
.ml-20{margin-left:-20px;}
.mr-20{margin-right:-20px;}
.mt-20{margin-top:-20px;}
.mb-20{margin-bottom:-20px;}
/* padding */
.p0{padding:0;}
.p1{padding:1px;}
.pl1{padding-left:1px;}
.pt1{padding-top:1px;}
.pr1{padding-right:1px;}
.pb1{padding-bottom:1px;}
.p2{padding:2px;}
.pl2{padding-left:2px;}
.pt2{padding-top:2px;}
.pr2{padding-right:2px;}
.pb2{padding-bottom:2px;}
.pl5{padding-left:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
.pr5{padding-right:5px;}
.pb5{padding-bottom:5px;}
.p10{padding:10px;}
.pl10{padding-left:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bdc{border:1px solid #ccc;}
.blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;}
.btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;}
.bdd{border:1px solid #ddd;}
.bld{border-left:1px solid #ddd;}
.brd{border-right:1px solid #ddd;}
.btd{border-top:1px solid #ddd;}
.bbd{border-bottom:1px solid #ddd;}
.bde{border:1px solid #eee;}
.ble{border-left:1px solid #eee;}
.bre{border-right:1px solid #eee;}
.bte{border-top:1px solid #eee;}
.bbe{border-bottom:1px solid #eee;}
/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
/* safe color */
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.gc{color:#ccc;}
.wh{color:white;}
/* font-size */
.f0{font-size:0;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f28{font-size:28px;}
/* font-family */
.fa{font-family:Arial;}
.ft{font-family:Tahoma;}
.fv{font-family:Verdana;}
.fs{font-family:Simsun;}
.fl{font-family:'Lucida Console';}
.fw{font-family:'Microsoft Yahei';}
/* font-style */
.n{font-weight:normal; font-style:normal; white-space: normal;}
.b{font-weight:bold;}
.i{font-style:italic;}
/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;}
/* text-decoration */
.tdl{text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}
/* letter-spacing */
.lt-1{letter-spacing:-1px;}
.lt0{letter-spacing:0;}
.lt1{letter-spacing:1px;}
/* white-space */
.nowrap{white-space:nowrap;}
/* word-wrap */
.bk{word-wrap:break-word;}
/* vertical-align */
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vb{vertical-align:bottom;}
.vt{vertical-align:top;}
.v-1{vertical-align:-1px;}
.v-2{vertical-align:-2px;}
.v-3{vertical-align:-3px;}
.v-4{vertical-align:-4px;}
.v-5{vertical-align:-5px;}
/* float */
.l{float:left;}
.r{float:right;}
/* clear */
.cl{clear:both;}
/* position */
.rel{position:relative;}
.abs{position:absolute;}
/*z-index*/
.zx1{z-index:1;}
.zx2{z-index:2;}
/* cursor */
.poi{cursor:pointer;}
.def{cursor:default;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* visibility */
.vh{visibility:hidden;}
.vv{visibility:visible;}
/* opacity */
.opa0{opacity:0; filer:alpha(opacity=0);}
/* zoom */
.z{*zoom:1;}

第一她那有的代码里面,包括了我们在网页开发中山大学部分常用的css属性,如display,height,margin,padding,border,color,font-size等。在属性类的命名上,基本上都以使用属性跟属性值的缩写。别的可验证的是:

1)width除了有固定值的属性类定义外,还蕴含了百分比的属性类定义,毕竟那个在骨子里职业中也时有用到;

2)margin,border,padding由于富含上下左右有关的品质,所以他还提供了针对上下左右片面的属性类,方便单独选拔。

除此以外她的代码都有浏览器包容性方面包车型地铁思索,所以借使在自个儿的劳作中用的话,最佳是参考着他的来。

这种办法在自己动用从前,笔者比较顾忌的是它的可维护性。因为那几个属性类相当多都包含属性值,举个例子.f12{font-size: 12px},所以在html成分的class属性值就决然会蕴藏f12如此的css属性类名,假若要修改的呼应的属性值该怎么做吧?那么就须求修改四个地点才行:首先是属性值定义的地点,第二是属性类名定义的地点,最终正是在html中央银行使的地方。当时想到这么些题指标时候,小编觉着这种方法不可行,因为在事实上中国人民解放军海军事工业程大学业作中,尼玛UI岗位的同事改设计的情状太多了,那样的话,页面上用到这种属性命名类的地点都要时时改来改去。

不过后来自身发觉,就算无须这种命超级模特式,笔者照旧改造不了UI调度设计图的事态,并且借使规划图一改,以致自个儿的html结果以及自己那多少个使用语义化命名的css类都要改,那么些麻烦程度实在比用属性命名类的办法更决心,所以本人最后就发轫在档案的次序中尝试这几个点子。结果开掘,其实非常好用,特别是做些文本类的排版,垂直布局,分栏布局,以及百分比搭架子等非常简单高效,前边提到的不得了维护的难点也相当小。作者有五个措施来化解来特别标题:

1)假诺原先用f12,后来规划把font-size改成14px,那么作者只用再充实叁个f14就可以,再把原本html中要求把f12调换来f14的地方,换来f14就可以。如若f12未有别的地点用到了,小编会思索把f12再删掉。

2)就算原先用f54,由于这种属性类并不富有通用性,所以笔者或然思考直接把f54替换来作者急需的属性类,比方f52。

在本文本有的的结尾,笔者还有只怕会付给自个儿关于这种使用方法的建议以及对爱惜难题的拍卖补充。以后先回来再看看张鑫旭的这几个代码,笔者从个人的角度,结合本身在品种中的真实意况,来讲下需求我们革新下的地点。

1)有个别选择固定值的属性类有多余的,也许有缺点和失误的;举个例子未有.h28代表height: 28px的,.w100到.w700可能都以用不到的

2)跟颜色相关的或是大多数都不肯定符合项目供给,尤其是这种做出来完全未有任何正式的安顿图,肉眼看上去同样的水彩,实际上却是不一样样的水彩;一样的本子,在分歧的页面,有比相当的大概率也运用了分化的颜色;以至是这种色系比较充分的设计。那几个属性类包涵border,background,color。当然纯银灰和纯樱草黄恐怕能够统一齐来的,毕竟那多少个颜色基本上各种网址都会用到。

3)还有个别属性类也是多余的,举个例子font-family,因为自个儿在类型中有用less,font-family是在其他地点定义的,所以那边就没有须要了。当然你尽管感到那么些照旧有用得着的话,能够思虑留下。

4)还足以思考扩张些其余的css属性类,比如border-radius以及flex等。border-radius今后用的已经很普及了,flex在移动端也会有能够用的到的地方。这一个就得依据自个儿的品类实在情状,慢慢扩张了。

综上所述上述那些剧情,作者对此这种面向属性命名的点子提议如下:

1)首先鲜明是能够张鑫旭的那套代码为根基;

2)对于height,line-height,font-size那五本性格,划分属性类的时候,尽量以小幅为2的等差布满来定义,如:
.h0 , .h18 , .h20 , .h22 , .h24 , .h26 , .h28 , .h30 , .h32 , .h34 , .h36 , .h38 , .h40;
.lh18 , .lh20 , .lh22 , .lh24 , .lh26 , .lh28 , .lh30 , .lh32 , .lh34 , .lh36 , .lh38 , .lh40 ;
.f12 , .f14 , .f16 , .f18 , .f20 , .f22 , .f24 , .f26 , .f28 , .f30 ;
一来是为了确定保证那一个小范围的的尺码都能掩饰到;二是为着有限辅助种种尺寸都是偶数,方便布局。

3)对于width,100以内的固定值,能够思虑以10为宽度定义贰个等差布满序列:
.w0 , .w10 , .w20 , .w30 , .w40 , .w50 , .w60 , .w70 , .w80 , .w90 , .w100
其余的固定值的属性类能够等到实在选取的时候再充实;
对此百分比的width,能够把一成到百分之百的值都定义出来,然后针对47% , 55% , 1/5, 1/6 也单独定义出来,因为这么些都属于常用的部分搭架子比例,所以能够考虑提前定义。

4)margin跟padding的属性类有的大概是剩下的,也许有十分大恐怕有缺点和失误的,不过无法超前定义太多,能够设想在其实用的进度中再充实;

5)border,background-color以及color能够设想留下。由于那多少个跟颜色有关,所以能够把设计图中最常用的两种颜色也抽取来分别定义追加进来,假若设计员比较有经验的话,做出来的东西就能相比规范,特别是在通用的颜料这一块,不会搞出点不清的颜色出来。在zxx.lib.css中,已定义的border,background-color还大概有color都以安全色,尽管是设计员的颜料,其实也能定义成属性类,比如#7c7c7c,就足以定义成.c7c,bg7c,bd7c。

6)能够依据项目标实在处境扩充border-radius以及flex等属性类。定义方式完全跟另外性质同样,如flex的:

CSS

.df { display: flex; } .dif { display: inline-flex; } .fdr { flex-direction: row; } .fdrr { flex-direction: row-reverse; } .fdc { flex-direction: column; } .fdcr { flex-direction: column-reverse; } .fwn { flex-wrap: nowrap; } .fww { flex-wrap: wrap; } .fwr { flex-wrap: wrap-reverse; } .jcfs { justify-content: flex-start; } .jcfe { justify-content: flex-end; } .jcc { justify-content: center; } .jcsb { justify-content: space-between; } .jcsa { justify-content: space-around; } .aifs { align-items: flex-start; } .aife { align-items: flex-end; } .aic { align-items: center; } .aib { align-items: baseline; } .ais { align-items: stretch; } .acfs { align-content: flex-start; } .acfe { align-content: flex-end; } .acc { align-content: center; } .acsb { align-content: space-between; } .acsa { align-content: space-around; } .acs { align-content: stretch; } .fxa { flex: auto; } .fxn { flex: none; } .fx1 { flex: 1; } .fx2 { flex: 2; } .fx3 { flex: 3; } .fx4 { flex: 4; } .fx5 { flex: 5; } .fx6 { flex: 6; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
.df {
  display: flex;
}
.dif {
  display: inline-flex;
}
.fdr {
  flex-direction: row;
}
.fdrr {
  flex-direction: row-reverse;
}
.fdc {
  flex-direction: column;
}
.fdcr {
  flex-direction: column-reverse;
}
.fwn {
  flex-wrap: nowrap;
}
.fww {
  flex-wrap: wrap;
}
.fwr {
  flex-wrap: wrap-reverse;
}
.jcfs {
  justify-content:  flex-start;
}
.jcfe {
  justify-content:  flex-end;
}
.jcc {
  justify-content:  center;
}
.jcsb {
  justify-content:  space-between;
}
.jcsa {
  justify-content:  space-around;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
.aic {
  align-items: center;
}
.aib {
  align-items: baseline;
}
.ais {
  align-items: stretch;
}
.acfs {
  align-content: flex-start;
}
.acfe {
  align-content: flex-end;
}
.acc {
  align-content: center;
}
.acsb {
  align-content: space-between;
}
.acsa {
  align-content: space-around;
}
.acs {
  align-content: stretch;
}
.fxa {
  flex: auto;
}
.fxn {
  flex: none;
}
.fx1 {
  flex: 1;
}
.fx2 {
  flex: 2;
}
.fx3 {
  flex: 3;
}
.fx4 {
  flex: 4;
}
.fx5 {
  flex: 5;
}
.fx6 {
  flex: 6;
}

以上那部分flex的属性类需结合auto-prefix这种工具来接纳,因为有兼容性问题,须要联合增添前缀。

7)关于那几个面向属性的css类协会:
第一,遵照前边的这一个建议,在张鑫旭的代码的底蕴上,调解成自个儿的门类所需今后,就应当把那几个代码单独贮存起来,作为贰个像bootstrap那样的独立的库来使用;
其次,在其实职业进度中,假如要增添新的css属性类,独有在那几个属性类有公用的价值,手艺增添到第一步的公家性质类Curry面去,不然的话,就只幸亏当下页面包车型地铁main css里面去写。

8)最终,便是在细水长流未有重新的代码前提下,依据实情去充实相关的css属性类。有公用性的就加到单独的Curry,没公用性的话就扩张到页面包车型客车main css里。

那些提议,也只是自身个人的利用经验总括,有比较多的民用主张,固然以为不对照旧有疑难的话,款待私信大概商议交换。本文最根本的指标是分享这种面向属性的命名格局,我深信不疑一定会有对象能够看到这一个格局的价值的。


末尾在张鑫旭的代码中,还会有一部分代码,定义了成百上千差不离常用的css类,例如浮动,浮动清除等等:

CSS

/* 块状成分水平居中 */ .auto{margin-left:auto; margin-right:auto;} /* 清除浮动*/ .fix{*zoom:1;} .fix:after{display:table; content:''; clear:both;} /* 基于display:table-cell的自适应布局 */ .cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;} /* 双栏自适应cell部分接二连三斯拉维尼亚语字符换行 */ .cell2{overflow:hidden; _display:inline-block;} /* 单行文字溢出虚点突显*/ .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /* css3交接动画效果 */ .trans{ -webkit-transition:all .15s; transition:all .15s; } /* 大小不定因素垂直居中 */ .dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;} /* 加载中背景图片 - 假如您使用该CSS小库,务必修改此图片地址 */ .loading{background:url(about:blank) no-repeat center;} /* 无框文本框文本域 */ .bd_none{border:0; outline:none;} /* 相对定位遮掩 */ .abs_out{position:absolute; left:-999em; top:-999em;} .abs_clip{position:absolute; clip:rect(0 0 0 0);} /* 按键禁止使用 */ .disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;} /*inline-block与float等宽列表*/ .inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;} .inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;} .float_two, .float_three, .float_four, .float_five, .float_six{float:left;} .inline_two, .float_two{width:50%; *width:49.9%;} .inline_three, .float_three{width:33.33333%; *width:33.3%;} .inline_four, .float_four{width:25%; *width:24.9%;} .inline_five, .float_five{width:20%; *width:19.9%;} .inline_six, .float_six{width:16.66666%; *width:16.6%;} .inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 块状元素水平居中 */
.auto{margin-left:auto; margin-right:auto;}
/* 清除浮动*/
.fix{*zoom:1;}
.fix:after{display:table; content:''; clear:both;}
/* 基于display:table-cell的自适应布局 */
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
/* 双栏自适应cell部分连续英文字符换行 */
.cell2{overflow:hidden; _display:inline-block;}
/* 单行文字溢出虚点显 示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/* css3过渡动画效果 */
.trans{
    -webkit-transition:all .15s;    
            transition:all .15s;
}
/* 大小不定元素垂直居中 */
.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}
/* 加载中背景图片 - 如果您使用该CSS小库,务必修改此图片地址 */
.loading{background:url(about:blank) no-repeat center;}
/* 无框文本框文本域 */
.bd_none{border:0; outline:none;}
/* 绝对定位隐藏 */
.abs_out{position:absolute; left:-999em; top:-999em;}
.abs_clip{position:absolute; clip:rect(0 0 0 0);}
/* 按钮禁用 */
.disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;}
/*inline-block与float等宽列表*/
.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}
.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}
.inline_two, .float_two{width:50%; *width:49.9%;}
.inline_three, .float_three{width:33.33333%; *width:33.3%;}
.inline_four, .float_four{width:25%; *width:24.9%;}
.inline_five, .float_five{width:20%; *width:19.9%;}
.inline_six, .float_six{width:16.66666%; *width:16.6%;}
.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

那几个代码也能够根据实情有一些调节,大多数在实际专门的学问中都有利用到的气象,这里仅作援用介绍,因为运用起来也很轻松的。

/*!

利用执行

为了印证那么些命名格局的作用,笔者做了三个demo,以天涯论坛博客列表页来注解什么采用这种命超级模特式。先来看博客列表页的布局:

图片 1

图片 2

能够看看这些列表页其实是用到了无尽语义化的命名的css类的,如若要用面向属性的命名情势来定义,就可以成为上边这一个样子:

图片 3

实效如下:

图片 4

连带源码可访谈以下链接查看:

在上述那几个实践进程中,并不曾具有的体制都接纳这种命名情势,首要的原故是单独的属性命名对不能够对伪类或然伪成分实行很好的样式调控,而碰巧新浪列表页中的每种链接的体制都不等同,所以不可能统一。那也正是面向属性的命名格局的一种限制意况。

* @名称:base.css

注意事项

纵然本文的指标是在讲究这种面向属性的命有名的模特式,不过你从文中的内容也得以看看,这种办法是有针对性的,前边一齐头介绍的时候就说过:

利用面向属性的css命名,把那三个大家实际想不有名字的,何况无需起名字的,何况能够只用单一的css属性只怕组合的单一css属性来描述的有个别,通通都用面向属性的css类来支配样式

接纳这一个格局的最大前提正是不要求起名字,并且可以用整合的单一属性来说述的剧情,就足以这种方法来增长速度页面布局的行事。像前边应用实行介绍过的那种意况同样,当你需求合作伪类,伪成分或许背景图片的时候,就不太相符用这种艺术。

在面向属性的命名方式无法运用的时候,有别的几种css的命名恐怕说协会格局得以选择:

1)语义化的命名,在整整页面,语义化的css命名依然不行获缺的一有个别,极其是那叁个划分页面模块的,比如.header  .footer .logo等等,抽象公共样式或许国有组件的,如.dropdown,.btn,.tab等等。这几个是css模块化,代码重用的一点都不小的集体单位,若是把它们也拆分了,会使得整个站点的css结构格外的复杂,那样的话还比不上直接用style呢;

2)采纳层级来定名,而且要多用直接子成分选用器,固然在张鑫旭的博客中不建议css有层级,但是一些时候若是不想命名,又不或然用面向属性的命超情势来消除的统一绸缪,可以思虑用层级来解决,在bootstrap的源码中相当多的css组件,比如nav,dropdown,tab等等,都以由此层级来支配的,一来是起到命名空间的功能,二来是削减对层数较深的子孙成分发生震慑。可是层数也不可能太深,最佳不用凌驾3层,否则html结构调换之后,就能够耳濡目染css代码的布局。

* @功效:1、重设浏览器私下认可样式

正文化总同盟结

本文主假诺流传面向属性的css命名方法这种思维,由于它在自身实际事业中援救笔者压缩了重重不须求的css命名,所以自身特意写了那篇小说把它分享出来。那个里面也饱含了相当多和睦在专门的学业中爆发的主见,不确定符合您本身的实际上须求,假使感兴趣的话,可以去钻探下张鑫旭的那2篇小说,相信您自身也可以总结出某个属于本人的事物。感激阅读:)

1 赞 3 收藏 评论

图片 5

*      2、设置通用原子类

*/

/* 幸免用户自定义背景颜色对网页的影响,增加让用户能够自定义字体 */

html {

background:white;

color:black;

}

/* 内外边距平常让种种浏览器样式的显现地方差别 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

margin:0;

padding:0;

}

/* 要专注表单成分并不接二连三父级 font 的标题 */

body,button,input,select,textarea {

font:12px '5b8b4f53',arial,sans-serif;

}

input,select,textarea {

font-size:100%;

}

/* 去掉 table cell 的边距并让其边重合 */

table {

border-collapse:collapse;

border-spacing:0;

}

/* ie bug:th 不继承 text-align */

th {

text-align:inherit;

}

/* 去除暗中同意边框 */

fieldset,img {

border:none;

}

/* ie6 7 8(q) bug 呈现为行内表现 */

iframe {

display:block;

}

/* 去掉列表前的标志,li 会承袭 */

ol,ul {

list-style:none;

}

/* 对齐是排版最根本的因素,别让什么都居中 */

caption,th {

text-align:left;

}

/* 来自yahoo,让标题都自定义,适应八个种类应用 */

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:500;

}

/* 统一上标和下标 */

sub,sup {

font-size:75%;

line-height:0;

position:relative;

vertical-align:baseline;

}

sup {

top:-0.5em;

}

sub {

bottom:-0.25em;

}

/* 让链接在 hover 状态下显得下划线 */

a:hover {

text-decoration:underline;

}

/* 默许不显得下划线,保持页面简洁 */

ins,a {

text-decoration:none;

}

/* 去除 ie6 & ie7 核心点状线 */

a:focus,*:focus {

outline:none;

}

/* 清除浮动 */

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

overflow:hidden;

}

.clearfix {

zoom:1; /* for ie6 & ie7 */

}

.clear {

clear:both;

display:block;

font-size:0;

height:0;

line-height:0;

overflow:hidden;

}

/* 设置展现和潜伏,平常用来与 js 同盟 */

.hide {

display:none;

}

.block {

display:block;

本文由金沙澳门官网发布于前端知识,转载请注明出处:面向属性的CSS命名

关键词: 金沙澳门官网

上一篇:然后做的更好
下一篇:没有了