CSS 规范

发现一个规范(nec)不错：
http://nec.netease.com/standard/css-sort.html

分类方法

主要是将css分成三个部分：公共部分、特殊部分、皮肤部分。
其实在项目中皮肤部分尚且很少用到，都是公共和特殊的部分，公共部分可以包括初始化基础样式和共有的样式。

其次，命名规则以部件的功能和性质决定，命名方法和顺序如下。
1.重置和默认样式 （normalize.css...)
2.统一处理的样式（统一的背景、图标等等）
3.布局grid（.g-)
4.模块module (.m-) ：语义化的整体，比如导航、登录、注册...
5.元件unit (.u-) ：最小单位，比如按钮、输入、文件输入、...
6.功能function (.f-) : 使用率较高的样式抽出来
7.皮肤skin (.s-)
8.状态 (.z-): 元件的不同状态下的显示

命名规则

1.放弃ID选择器，无法重用，使用类选择器
2.‘-’连字符，进行分割，例如class="xxx xxx-yyy" 基础类和扩展的区分
3.单个字母+‘-’ 为前缀命名，js获取的节点（.j-）但是不可定义样式
4.后代选择器命名
(1)约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，例如.m-list .item{}
(2)一个语义化的标签也可以是后代选择器，比如：.m-list li{}。
(3)不允许单个字母的类选择器
(4)后代选择器不需要完整表现结构树层级，尽量能短则短。
(5)后代选择器不要在页面布局中使用，因为污染的可能性较大
5.命名应简约而不失语义,例如 .m-list .wrap2{}
6.相同语义的不同类命名:直接加数字或字母区分即可,例如m-list m-list1 m-list2
7.模块和元件的扩展类的命名方法: +“-”+数字或字母

基类自身可以独立使用,扩展类必须基于基类使用

8.防污染： 慎用标签选择器，必要时采用类选择器

代码格式

1.选择器、属性和值都使用小写
2.单行写完一个选择器定义（不强制）
3.最后一个值也以分号结尾
4.省略值为0时的单位
5.使用单引号
6.首选16进制表示颜色值
7.根据属性的重要性按顺序书写：
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性

属性重要性

8.私有在前，标准在后
9.注释格式：/* 注释文字 */

优化方案

1.值缩写
缩写值可以减少CSS文件大小，并增加可读性和可维护性。
2.避免耗性能的属性
需求第一
3.选择器合并
4.背景图优化合并
（1）图片本身的优化
（2）多张图片的合并
（3）分类合并
5.Hack的避免 ---这个暂时还没看透彻
6.如果CSS可以做到，就不要使用JS
7.便于阅读修改
8.清晰的CSS模块
9.文件压缩
10.其他格式优化

最佳实践

统一语义理解和命名
布局（.g-）

布局

模块（.m-）、元件（.u-）

模块&元件

功能（.f-）

功能

皮肤（.s-）

皮肤

状态（.z-）

状态

以上只供学习，侵权联系删除。