css规范
<p>[TOC]</p>
<h2>CSS规范（nec)</h2>
<p>标注说明：强执行（！）</p>
<h3>命名规范</h3>
<h4>1.使用'-'做衔接符（！）</h4>
<h4>2.使用类选择器，放弃ID选择器（！）</h4>
<h4>3.分类的命名方法（！）</h4>
<ul>
<li>使用单个字母+"-"为前缀（布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-））</li>
</ul>
<h4>4.后代选择器命名（！）</h4>
<ul>
<li>
<p>约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，如：a-list 这边的a没有意义。</p>
</li>
<li>
<p>1.同样的样式名可以在不同的模块或元件中重复使用；</p>
</li>
<li>
<p>2.尽量能短则短</p>
</li>
<li>注意：后代选择器不要在页面布局中使用,因为污染的可能性较大；</li>
</ul>
<h4>5.相同语义的不同类命名</h4>
<ul>
<li>直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。</li>
</ul>
<h4>6.模块和元件的扩展类的命名方法(！)</h4>
<ul>
<li>
<p>那么就以它们中出现率最高的做成基类，其他做成基类的扩展，+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。</p>
</li>
<li>
<p>补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。</p>
</li>
<li>
<p>如果你的扩展类是表示不同状态，那么你可以这样命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等</p>
</li>
<li>如果你的网站可以不兼容IE6等浏览器，那么你标识状态的方法也可以采取独立状态分类（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然后像这样使用：class="u-btn z-dis"。</li>
</ul>
<h4>7.模块和元件的后代选择器的扩展类（！）</h4>
<ul>
<li>
<p>有时候模块内会有些类似的东西，如果你没有把它们做成元件和扩展，那么也可以使用后代选择器和扩展。</p>
</li>
<li>
<p>后代选择器：.m-login .btn{}。</p>
</li>
<li>
<p>后代选择器扩展：.m-login .btn-1{}，.m-login .btn-dis{}。</p>
</li>
<li>
<p>同样也可以采取独立状态分类（.z-）方法：.m-login .btn.z-dis{}，然后像这样使用：class="btn z-dis"。</p>
</li>
<li>
<p>注：此方法用于类选择器，直接使用标签做为选择器的则不需要使用此命名方法。</p>
</li>
<li>注：为防止后代选择器的扩展类和大类命名规范冲突，后代选择器不允许使用单个字母。比如：.m-list .a{}是不允许的，因为当这个.a需要扩展的时候就会变成.a-bb，这样就和大类的命名规范冲突。</li>
</ul>
<h4>8.分组选择器有时可以代替扩展方法</h4>
<ul>
<li>
<p>有时候虽然两个同类型的模块很相似，但是你希望他们之间不要有依赖关系，也就是说你不希望使用扩展的方法，那么你可以通过合并选择器来设置共性的样式。使用本方法的前提是：相同类型、功能和外观都相似，写在同一片代码区域方便维护。</p>
<p>/<em> 两个元件共性的样式 </em>/
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/<em> 在分别是两个元件各自的样式 </em>/
/<em> tip1 </em>/
.u-tip1{}
.u-tip1 .itm{}
/<em> tip2 </em>/
.u-tip2{}
.u-tip2 .itm{}</p>
</li>
</ul>
<h4>9.防止污染和被污染（！）</h4>
<ul>
<li>
<p>模块选择器（.m-）确保唯一性</p>
</li>
<li>后代选择器的父选择器为最近的模块选择器（.m-）</li>
</ul>
<h3>代码格式</h3>
<h4>1.选择器、属性和值都使用小写</h4>
<h4>2.单行写完一个选择器定义</h4>
<ul>
<li>
<p>便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。如果有嵌套定义，可以采取内部单行的形式。</p>
<p>/<em> 单行定义一个选择器 </em>/
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/<em> 这是一个有嵌套定义的选择器 </em>/
@media all and (max-width:600px){
.m-class1 .itm{height:17px;line-height:17px;font-size:12px;}
.m-class2 .itm{width:100px;overflow:hidden;}
}
@-webkit-keyframes showitm{
0%{height:0;opacity:0;}
100%{height:100px;opacity:1;}
}</p>
</li>
</ul>
<h4>3.最后一个值也以分号结尾</h4>
<ul>
<li>通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。</li>
</ul>
<h4>4.省略值为0时的单位</h4>
<h4>5.使用单引号</h4>
<ul>
<li>省略url引用中的引号，其他需要引号的地方使用单引号。</li>
</ul>
<h4>6.根据属性的重要性按顺序书写</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">显示属性</th>
<th style="text-align: left;">自身属性</th>
<th>文本属性和其他修饰</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">display</td>
<td style="text-align: left;">width</td>
<td>font</td>
</tr>
<tr>
<td style="text-align: left;">visibility</td>
<td style="text-align: left;">height</td>
<td>text-align</td>
</tr>
<tr>
<td style="text-align: left;">position</td>
<td style="text-align: left;">margin</td>
<td>text-decoration</td>
</tr>
<tr>
<td style="text-align: left;">float</td>
<td style="text-align: left;">padding</td>
<td>vertical-align</td>
</tr>
<tr>
<td style="text-align: left;">clear</td>
<td style="text-align: left;">border</td>
<td>white-space</td>
</tr>
<tr>
<td style="text-align: left;">list-style</td>
<td style="text-align: left;">overflow</td>
<td>color</td>
</tr>
<tr>
<td style="text-align: left;">top</td>
<td style="text-align: left;">min-width</td>
<td>background</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>如果属性间存在关联性，则不要隔开写。 如：height 和 line-height</p>
</li>
<li>
<p>私有在前，标准在后</p>
<p>.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}</p>
</li>
</ul>
<h4>7.原则上不允许使用Hack</h4>
<ul>
<li>
<p>由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。</p>
</li>
<li>统一Hack方法,统一使用“*”和“_”分别对IE7和6进行Hack。</li>
</ul>
<h4>8.建议并适当缩写值</h4>
<ul>
<li>
<p>“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。</p>
</li>
<li>当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。</li>
</ul>
<h4>9.选择器顺序</h4>
<ul>
<li>从大到小（以选择器的范围为准）</li>
<li>从低到高（以等级上的高低为准）</li>
<li>从先到后（以结构上的先后为准）</li>
<li>
<p>从父到子（以结构上的嵌套为准）</p>
<p>/<em> 从大到小 </em>/
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/<em> 从低到高 </em>/
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/<em> 从先到后 </em>/
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/<em> 从父到子 </em>/
.m-list{width:300px;}
.m-list .itm{float:left;}</p>
</li>
</ul>
<h3>不符合NEC规范的选择器用法（！）</h3>
<ul>
<li>.class{}</li>
<li>
<p>不要以一个没有类别的样式作为主选择器，这样的选择器只能作为后代选择器使用，比如.m-xxx .class{}。</p>
</li>
<li>.m-xxx div{}</li>
<li>
<p>不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。</p>
</li>
<li>.g-xxx .class{}</li>
<li>
<p>不要在页面布局中使用后代选择器，因为这个后代选择器可能会污染里面的元素。</p>
</li>
<li>.g-xxx .m-yyy{}.g-xxx .u-yyy{}</li>
<li>
<p>不要用布局去控制模块或元件，模块和元件应与布局分离独立。</p>
</li>
<li>.m-xxx .f-xxx{}.m-xxx .s-xxx{}</li>
<li>
<p>不要通过模块或其他类来重定义或修改或添加已经定义好的功能类选择器和皮肤类选择器。</p>
</li>
<li>.m-xxx .class .class .class .class{}</li>
<li>
<p>不要将选择器写的过于冗长，这会额外增加文件大小并且限制了太小范围的选择器，使树形结构过于严格应用范围过于局限，建议3-4个长度之内写完。</p>
</li>
<li>
<p>选择器并不需要完整反映结构嵌套顺序，相反，能简则简。</p>
</li>
<li>.m-xxx .m-yyy .zzz{}</li>
<li>
<p>不要越级控制，如果.zzz是.m-yyy的后代选择器，那么不允许.m-yyy之外的选择器控制或修改.zzz。</p>
</li>
<li>此时可以使用.m-yyy的扩展来修改.zzz，比如.m-yyy-1 .zzz{}。</li>
</ul>
<h3>扩展类使用错误</h3>
<ul>
<li>
<p>扩展类必须和其基类同时使用于同一个节点。</p>
<p>--- 错误：class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。
--- 正确：class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。</p>
</li>
</ul>
<h3>补充规范</h3>
<ul>
<li>
<p>只允许选择器的末尾出现标签（例：.m-list .list-odd a）</p>
</li>
<li>
<p>布局选择器（.g-）只写显示属性（display/visibility/position/float/clear/list-style/top）和 部分自身属性（width/height/margin/overflow）</p>
</li>
<li>
<p>选择器命名:XXX(-XXX){1,2},无特殊情况下不可超过3层。</p>
</li>
<li>元素层次：XXX( XXX){1,2},无特殊情况下不可超过3层。</li>
</ul>
<h3>DEMO</h3>
<p><a href="http://192.168.1.26:8080/FD_PCLibrary/components/CSS/demo/index.html">DEMO</a></p>
<h3>统一语义理解和命名（！）</h3>
<p>布局（.g-）</p>
<table>
<thead>
<tr>
<th style="text-align: left;">语义</th>
<th style="text-align: left;">命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">文档</td>
<td style="text-align: left;">doc</td>
<td>doc</td>
</tr>
<tr>
<td style="text-align: left;">头部</td>
<td style="text-align: left;">head</td>
<td>hd</td>
</tr>
<tr>
<td style="text-align: left;">主体</td>
<td style="text-align: left;">body</td>
<td>bd</td>
</tr>
<tr>
<td style="text-align: left;">尾部</td>
<td style="text-align: left;">foot</td>
<td>ft</td>
</tr>
<tr>
<td style="text-align: left;">主栏</td>
<td style="text-align: left;">main</td>
<td>mn</td>
</tr>
<tr>
<td style="text-align: left;">主栏子容器</td>
<td style="text-align: left;">mainc</td>
<td>mnc</td>
</tr>
<tr>
<td style="text-align: left;">侧栏</td>
<td style="text-align: left;">side</td>
<td>sd</td>
</tr>
<tr>
<td style="text-align: left;">侧栏子容器</td>
<td style="text-align: left;">sidec</td>
<td>sdc</td>
</tr>
<tr>
<td style="text-align: left;">盒容器</td>
<td style="text-align: left;">wrap/box</td>
<td>wrap/box</td>
</tr>
</tbody>
</table>
<p>模块（.m-）、元件（.u-）</p>
<table>
<thead>
<tr>
<th style="text-align: left;">语义</th>
<th style="text-align: left;">命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">头图</td>
<td style="text-align: left;">focus</td>
<td>focus</td>
</tr>
<tr>
<td style="text-align: left;">导航</td>
<td style="text-align: left;">nav</td>
<td>nav</td>
</tr>
<tr>
<td style="text-align: left;">子导航</td>
<td style="text-align: left;">subnav</td>
<td>snav</td>
</tr>
<tr>
<td style="text-align: left;">面包屑</td>
<td style="text-align: left;">crumb</td>
<td>crm</td>
</tr>
<tr>
<td style="text-align: left;">菜单</td>
<td style="text-align: left;">menu</td>
<td>menu</td>
</tr>
<tr>
<td style="text-align: left;">选项卡</td>
<td style="text-align: left;">tab</td>
<td>tab</td>
</tr>
<tr>
<td style="text-align: left;">标题区</td>
<td style="text-align: left;">head/title</td>
<td>hd/tt</td>
</tr>
<tr>
<td style="text-align: left;">内容区</td>
<td style="text-align: left;">body/content</td>
<td>bd/ct</td>
</tr>
<tr>
<td style="text-align: left;">列表</td>
<td style="text-align: left;">list</td>
<td>lst</td>
</tr>
<tr>
<td style="text-align: left;">表格</td>
<td style="text-align: left;">table</td>
<td>tb</td>
</tr>
<tr>
<td style="text-align: left;">表单</td>
<td style="text-align: left;">form</td>
<td>fm</td>
</tr>
<tr>
<td style="text-align: left;">热点</td>
<td style="text-align: left;">hot</td>
<td>hot</td>
</tr>
<tr>
<td style="text-align: left;">排行</td>
<td style="text-align: left;">top</td>
<td>top</td>
</tr>
<tr>
<td style="text-align: left;">登录</td>
<td style="text-align: left;">login</td>
<td>log</td>
</tr>
<tr>
<td style="text-align: left;">标志</td>
<td style="text-align: left;">logo</td>
<td>logo</td>
</tr>
<tr>
<td style="text-align: left;">广告</td>
<td style="text-align: left;">advertise</td>
<td>ad</td>
</tr>
<tr>
<td style="text-align: left;">搜索</td>
<td style="text-align: left;">search</td>
<td>sch</td>
</tr>
<tr>
<td style="text-align: left;">幻灯</td>
<td style="text-align: left;">slide</td>
<td>sld</td>
</tr>
<tr>
<td style="text-align: left;">提示</td>
<td style="text-align: left;">tips</td>
<td>tips</td>
</tr>
<tr>
<td style="text-align: left;">帮助</td>
<td style="text-align: left;">help</td>
<td>help</td>
</tr>
<tr>
<td style="text-align: left;">新闻</td>
<td style="text-align: left;">news</td>
<td>news</td>
</tr>
<tr>
<td style="text-align: left;">下载</td>
<td style="text-align: left;">download</td>
<td>dld</td>
</tr>
<tr>
<td style="text-align: left;">注册</td>
<td style="text-align: left;">regist</td>
<td>reg</td>
</tr>
<tr>
<td style="text-align: left;">投票</td>
<td style="text-align: left;">vote</td>
<td>vote</td>
</tr>
<tr>
<td style="text-align: left;">版权</td>
<td style="text-align: left;">copyright</td>
<td>cprt</td>
</tr>
<tr>
<td style="text-align: left;">结果</td>
<td style="text-align: left;">result</td>
<td>rst</td>
</tr>
<tr>
<td style="text-align: left;">标题</td>
<td style="text-align: left;">title</td>
<td>tt</td>
</tr>
<tr>
<td style="text-align: left;">按钮</td>
<td style="text-align: left;">button</td>
<td>btn</td>
</tr>
<tr>
<td style="text-align: left;">输入</td>
<td style="text-align: left;">input</td>
<td>ipt</td>
</tr>
</tbody>
</table>
<p>功能（.f-）</p>
<table>
<thead>
<tr>
<th style="text-align: left;">语义</th>
<th style="text-align: left;">命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">浮动清除</td>
<td style="text-align: left;">clearboth</td>
<td>cb</td>
</tr>
<tr>
<td style="text-align: left;">向左浮动</td>
<td style="text-align: left;">floatleft</td>
<td>fl</td>
</tr>
<tr>
<td style="text-align: left;">向右浮动</td>
<td style="text-align: left;">floatright</td>
<td>fr</td>
</tr>
<tr>
<td style="text-align: left;">内联块级</td>
<td style="text-align: left;">inlineblock</td>
<td>ib</td>
</tr>
<tr>
<td style="text-align: left;">文本居中</td>
<td style="text-align: left;">textaligncenter</td>
<td>tac</td>
</tr>
<tr>
<td style="text-align: left;">文本居右</td>
<td style="text-align: left;">textalignright</td>
<td>tar</td>
</tr>
<tr>
<td style="text-align: left;">文本居左</td>
<td style="text-align: left;">textalignleft</td>
<td>tal</td>
</tr>
<tr>
<td style="text-align: left;">垂直居中</td>
<td style="text-align: left;">verticalalignmiddle</td>
<td>vam</td>
</tr>
<tr>
<td style="text-align: left;">溢出隐藏</td>
<td style="text-align: left;">overflowhidden</td>
<td>oh</td>
</tr>
<tr>
<td style="text-align: left;">完全消失</td>
<td style="text-align: left;">displaynone</td>
<td>dn</td>
</tr>
<tr>
<td style="text-align: left;">字体大小</td>
<td style="text-align: left;">fontsize</td>
<td>fs</td>
</tr>
<tr>
<td style="text-align: left;">字体粗细</td>
<td style="text-align: left;">fontweight</td>
<td>fw</td>
</tr>
</tbody>
</table>
<p>皮肤（.s-）</p>
<table>
<thead>
<tr>
<th style="text-align: left;">语义</th>
<th style="text-align: left;">命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">字体颜色</td>
<td style="text-align: left;">fontcolor</td>
<td>fc</td>
</tr>
<tr>
<td style="text-align: left;">背景</td>
<td style="text-align: left;">background</td>
<td>bg</td>
</tr>
<tr>
<td style="text-align: left;">背景颜色</td>
<td style="text-align: left;">backgroundcolor</td>
<td>bgc</td>
</tr>
<tr>
<td style="text-align: left;">背景图片</td>
<td style="text-align: left;">backgroundimage</td>
<td>bgi</td>
</tr>
<tr>
<td style="text-align: left;">背景定位</td>
<td style="text-align: left;">backgroundposition</td>
<td>bgp</td>
</tr>
<tr>
<td style="text-align: left;">边框颜色</td>
<td style="text-align: left;">bordercolor</td>
<td>bdc</td>
</tr>
</tbody>
</table>
<p>状态（.z-）</p>
<table>
<thead>
<tr>
<th style="text-align: left;">语义</th>
<th style="text-align: left;">命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">选中</td>
<td style="text-align: left;">selected</td>
<td>sel</td>
</tr>
<tr>
<td style="text-align: left;">当前</td>
<td style="text-align: left;">current</td>
<td>crt</td>
</tr>
<tr>
<td style="text-align: left;">显示</td>
<td style="text-align: left;">show</td>
<td>show</td>
</tr>
<tr>
<td style="text-align: left;">隐藏</td>
<td style="text-align: left;">hide</td>
<td>hide</td>
</tr>
<tr>
<td style="text-align: left;">打开</td>
<td style="text-align: left;">open</td>
<td>open</td>
</tr>
<tr>
<td style="text-align: left;">关闭</td>
<td style="text-align: left;">close</td>
<td>close</td>
</tr>
<tr>
<td style="text-align: left;">出错</td>
<td style="text-align: left;">error</td>
<td>err</td>
</tr>
<tr>
<td style="text-align: left;">不可用</td>
<td style="text-align: left;">disabled</td>
<td>dis</td>
</tr>
</tbody>
</table>