小白讲解CSS 样式码字规范

编码设置

采用UTF-8编码，在CSS代码头部使用。

命名的规范

状态：以s为命名，表示动态的、具有交互性质的状态

工具：以u为命名，表示不耦合业务逻辑的，可服用的工具

布局：以g为命名。

组件：以m为命名，表示可以复用，移植的组件模块

命名的思想：没有选择BEM这种命名 过于严苛以及样式名长丑的规则

字符小写

定义的选择器名，属性以及属性值的书写为小写

选择器：当一个规则包含多个选择器时，每个选择器独占一行

命名短语义化良好：对于选择器的命名，尽量简介

规则声明块

当规则声明块中有多个样式声明时，每条样式独占一行，在规则声明块的左大括号 { 前加一个空格。在样式属性的冒号 : 后面加上一个空格，前面不加空格。

在每条样式后面都以分号 ; 结尾。规则声明块的右大括号 } 独占一行。每个规则声明间用空行分隔。所有最外层引号使用单引号 ' 。当一个属性有多个属性值时，以逗号 , 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。

数值与单位

当属性值或颜色参数为 0 - 1 之间的数时，省略小数点前的 0

当长度值为 0 时省略单位。

十六进制的颜色属性值使用小写和尽量简写。

样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

如果包含 content 属性，应放在最前面；

Positioning Model 布局方式、位置，相关属性包括：position / top / right / bottom / left / z-index / display / float / ...

Box Model 盒模型，相关属性包括：width / height / padding / margin / border / overflow / ...

Typographic 文本排版，相关属性包括：font / line-height / text-align / word-wrap / ...

Visual 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / ...

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

合理使用使用引号

在某些样式中，会出现一些含有空格的关键字或者中文关键字。