NEC的学习笔记
NEC的学习笔记
写过很多代码后，会有代码的规范有一些需求，会有想写出美观、规范、易懂的代码。
今天学习了NEC，全称Nice Easy CSS（http://nec.netease.com/）,顾名思义，就是为了写简单漂亮的CSS代码，下面是我今天所学。
PS:有可能有些我理解会有问题。
规范
我最看重这个，里面的框架、代码库、插件我觉得不是太重要。
CCS规范
CSS文件的分类：
公共型样式：也就是各个页面共用的样式
特殊型样式：当前页面的特殊样式（只此页面使用）
皮肤型样式：换肤的样式，有三个文件（如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。——摘自NEC规范文档）
1.global.css：皮肤的全局样式
2.index.css：当前页面的特殊皮肤样式（PS:我自己的理解，NEC里面并没有说）
3.skin.css：皮肤的皮肤样式
CSS内部分类及其顺序：
1.重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式
2.统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！
3.布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
4.模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等
5.元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
6.功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
7.皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
8.状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel。
——摘自NEC规范文档
我觉得这样分挺有意思的，看起来很规范。
命名规则：
有时候命名是个很头痛的问题，有时并不知道怎么命名才是恰当的，合理的。当然这里的命名规则当然是NEC所提出的规则，并不是说强制有规范要这样写。
NEC的命名规则说得有些散，或者说只是一种教人不要做什么的提示，我试着把它要说的东西分成两部分，一是NEC命名规则，另一是好的命名习惯。
NEC命名规则:
其实NEC的命名规则也就两个
1.分类的命名方法：使用单个字母+"-"为前缀
布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。
——摘自NEC规范文档
而我们需要做的只是分辨我们要写的CSS是什么分类，这个简单吧。
2.后代选择器命名
NEC在这个部分说得有一些绕，我尝试自己说清楚。
1.不要用单个字母做类选择器，因为这样会跟分类命名（.g-）有冲突，例如你写了一个.a,你可能写一个.a-expand做拓展，那这不就冲突了。
2.语义化标签可作为后代选择器，比如：.m-list li{}。
PS:这里必需强调的是，所有的CSS命名都是 分类 + 后台选择器 ，不能出现单独出现的后代选择器， 这样是为了避免CSS污染，在多人协作的时候互不冲突。
好的命名习惯：
1.使用类选择器，放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。——摘自NEC规范文档我觉得这点给我的警示最大，的确有的时候用ID选择器写CSS，尽管是不考虑重用，但写起来总感觉别捏。
2.后代选择器
后代选择器不需要完整表现结构树层级，尽量能短则短。
后代选择器不要在页面布局中使用，因为污染的可能性较大；
3.命名应简约而不失语义
代码格式：
1.选择器、属性和值都使用小写
在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
——摘自NEC规范文档有时我会写成小驼峰的样子，导致看起来好别捏，这个有必要遵守。
2.单行写完一个选择器定义便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。
例如：{.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
——摘自NEC规范文档
对于这个说法，我是非常赞同的，有些人说每个属性一行才是规范的。我不得不说一个观点是，代码是给人看的，只有在运行的时候才拿给机器运行。我试过每个属性一行，但看起来特别麻烦，特别在模块多的时候，都不能一目了然，看得很痛苦，所有我建议这样写。
3.省略值为0时的单位
为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
例如： .m-box{margin:0 10px;background-position:50% 0;}
——摘自NEC规范文档
4.根据属性的重要性按顺序书写先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。
——摘自NEC规范文档这个建议也是不错
5.私有在前，标准在后
先写带有浏览器私有标志的，后写W3C标准的。
例如:.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}
——摘自NEC规范文档这个NEC并没说明为什么要这样写，那我就说一下，首先这些-webkit-box前缀，是浏览器私有标志，当浏览器还实现未标准的属性，上面写法是没有问题的。而随着时间发展，属性可能被标准化，上面写法也是没问题的，但如果把标准写在前面，如果私有属性和最后的标准属性不一致就会有兼容问题。
6.选择器顺序
从大到小（以选择器的范围为准）
从低到高（以等级上的高低为准）
从先到后（以结构上的先后为准）
从父到子（以结构上的嵌套为准）
——摘自NEC规范文档
文章到这里差不多结束了，我认为重要的就这些东西，其他的可以去NEC官网上看，bye。