web前端CSS代码的书写规范

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

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

编码设置

采用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变量命名

字符小写

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

选择器

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

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

.g-header>.g-header-des,

.g-content~.g-footer{

}

命名短且语义化良好

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