不容忽略的——CSS规范

1、CSS分类方法：

1. 公共型样式

2. 特殊型样式

3. 皮肤型样式

    并以此顺序引用

1 <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
2 <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
3 <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

2、CSS命名规则

1. 使用类选择器，放弃ID选择器
2. NEC特殊字符："-"连字符
3. 分类的命名方法：使用单个字母+"-"为前缀
   布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。
    后代选择器命名
   1. 布局（grid）（.g-）：将页面分割为几个大块，一般有头部、主体、主栏、侧栏、尾部等！
   2. 模块（module）（.m-）：一般是一个语义化的能够重复使用的较大的总体！好比导航、登陆、注册、各类列表、评论、搜索等！
   3. 元件（unit）（.u-）：一般是一个不可再分的较为小巧的个体，一般被重复用于各类模块中！好比按钮、输入框、loading、图标等！
   4. 功能（function）（.f-）：为方便一些经常使用样式的使用，咱们将这些使用率较高的样式剥离出来，按需使用，一般这些选择器具备固定样式表现，好比清除浮动等！不可滥用！
   5. 皮肤（skin）（.s-）：若是你须要把皮肤型的样式抽离出来，一般为文字色、背景色（图）、边框色等，非换肤型网站一般只提取文字色！非换肤型网站不可滥用此类！
   6. 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或做为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。
4. 不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器
   不容许单个字母的类选择器出现
5. 相同语义的不一样类命名
   直接加数字或字母区分便可（如：.m-list、.m-list二、.m-list3等）

         模块和元件的扩展类的命名方法

         当A、B、C、...它们类型相同且外形类似区别不大，那么就以它们中出现率最高的作成基类，其余作成基类的扩展。

方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-一、.m-list-2等）。

补充：基类自身能够独立使用（如：class="m-list"便可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。

3、代码格式

1. 选择器、属性和值都使用小写
2. 最后一个值也以分号结尾
3. 省略值为0时的单位
4. 使用单引号

根据属性的重要性按顺序书写
显示属性、自身属性、文本属性和其余修饰

4、优化

若是CSS能够作到，就不要使用JS

5、注意

• .class{}

  不要以一个没有类别的样式做为主选择器，这样的选择器只能做为后代选择器使用，好比.m-xxx .class{}。

• 选择器并不须要完整反映结构嵌套顺序，相反，能简则简。
• 扩展类必须和其基类同时使用于同一个节点。
  错误：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"。