CSS 样式书写规范

可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。

 

我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。

 

本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。

 

也希望可以有更多的建议，共同的完善。本规范也可以在我的 Github 上看到，欢迎留言或者提 PR。https://github.com/chokcoco/CSSWritingRules

 

我觉得不同的规范都有各自的长处与缺陷，对待所谓的规范最好的方式不是人云亦云，拿来就用，而是应该结合实际情况及需求，取长补短，取其精华去其糟粕。

 

编码设置

 

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

 

@charset "utf-8";

 

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

 

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

 

/* 字符编码 */

@charset "utf-8";

html,

body {

  height: 100%;

}

 

@charset "utf-8";

 

命名空间规范

 

• 布局：以 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 变量命名

 

字符小写

 

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

 

选择器