>

面向属性的CSS命名

- 编辑:至尊游戏网站 -

面向属性的CSS命名

面向属性的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,能够把百分之十到百分百的值都定义出来,然后针对十分二 , 51% , 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;

}

/* 设置浮动,减少浮动带来的 bug */

.fl,.fr {

display:inline;

}

.fl {

float:left;

}

.fr {

float:right;

}

/*文字排版、颜色*/

.f12{font-size:12px}

.f13{font-size:13px}

.f14{font-size:14px}

.f16{font-size:16px}

.f20{font-size:20px}

.fb{font-weight:bold}

.fn{font-weight:normal}

.t2{text-indent:2em}

.red,a.red{color:#cc0031}

.darkblue,a.darkblue{color:#039}

.gray,a.gray{color:#878787}

.lh150{line-height:150%}

.lh180{line-height:180%}

.lh200{line-height:200%}

.unl{text-decoration:underline;}

.no_unl{text-decoration:none;}

/*定位*/

.tl{text-align:left}

.tc{text-align:center}

.tr{text-align:right}

.fl{float:left;display:inline}

.fr{float:right;display:inline}

.cb{clear:both}

.cl{clear:left}

.cr{clear:right}

.vm{vertical-align:middle}

.pr{position:relative}

.pa{position:absolute}

.abs-right{position:absolute;right:0}

.zoom{zoom:1}

.hidden{visibility:hidden}

.none{display:none}

/*长度中度*/

.w10{width:10px}

.w20{width:20px}

.w50{width:50px}

.w90{width:90px}

.w100{width:100px}

.w200{width:200px}

.w250{width:250px}

.w500{width:500px}

.w800{width:800px}

.w{width:100%}

.h50{height:50px}

.h80{height:80px}

.h100{height:100px}

.h200{height:200px}

.h{height:100%}

/*边距*/

.m10{margin:10px}

.m15{margin:15px}

.m30{margin:30px}

.mt5{margin-top:5px}

.mt10{margin-top:10px}

.mt15{margin-top:15px}

.mt50{margin-top:50px}

.mt100{margin-top:100px}

.mb5{margin-bottom:5px}

.mb10{margin-bottom:10px}

.mb15{margin-bottom:15px}

.mb100{margin-bottom:100px}

.ml5{margin-left:5px}

.ml10{margin-left:10px}

.ml15{margin-left:15px}

.ml20{margin-left:20px}

.ml30{margin-left:30px}

.ml50{margin-left:50px}

.ml100{margin-left:100px}

.mr5{margin-right:5px}

.mr10{margin-right:10px}

.mr15{margin-right:15px}

.mr50{margin-right:50px}

.mr100{margin-right:100px}

.p10{padding:10px;}

.p15{padding:15px;}

.p30{padding:30px;}

.pt5{padding-top:5px}

.pt10{padding-top:10px}

.pt15{padding-top:15px}

.pt20{padding-top:20px}

.pt30{padding-top:30px}

.pt50{padding-top:50px}

.pb5{padding-bottom:5px}

.pb100{padding-bottom:100px}

.pl5{padding-left:5px}

.pl10{padding-left:10px}

.pl50{padding-left:50px}

.pl100{padding-left:100px}

.pr5{padding-right:5px}

.pr10{padding-right:10px}

.pr15{padding-right:15px}

.pr100{padding-right:100px}

本文由软件综合发布,转载请注明来源:面向属性的CSS命名