CSS 样式书写规范(推荐)

 编码设置

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

@charset "utf-8";

注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。

例如，下面的例子都会使得 @charset 失效：

命名空间规范

•布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。

•状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。

•工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。

•组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。

•钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

命名空间思想

没有选择 BEM 这种命名过于严苛及样式名过长过丑的规则，采取了一种比较折中的方案。

不建议使用下划线 _ 进行连接

•节省操作，输入的时候少按一个 shift 键

•能良好区分 JavaScript 变量命名

字符小写

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

选择器

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

、+、~、> 选择器的两边各保留一个空格。

命名短且语义化良好

对于选择器的命名，尽量简洁且具有语义化，不应该出现 g-abc 这种语义模糊的命名。

规则声明块

•当规则声明块中有多个样式声明时，每条样式独占一行。

•在规则声明块的左大括号 { 前加一个空格。

•在样式属性的冒号 : 后面加上一个空格，前面不加空格。

•在每条样式后面都以分号 ; 结尾。

•规则声明块的右大括号 } 独占一行。

•每个规则声明间用空行分隔。

•所有最外层引号使用单引号 ‘ 。

•当一个属性有多个属性值时，以逗号 , 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。

完整示例如下：

数值与单位

•当属性值或颜色参数为 0 – 1 之间的数时，省略小数点前的 0 。color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);