web前端CSS代码的书写规范

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

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

编码设置

采用UTF-8编码,在CSS代码头部使用:

charset"utf-8";

注意,必须要定义在CSS文件所有字符的前面(包括编码注释),

charset才会生效。

例如,下面的例子都会使得

charset失效:

charset"utf-8";

html,

body{

height:%;

}

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这种语义模糊的命名。




转载请注明:http://www.aierlanlan.com/rzdk/2415.html

  • 上一篇文章:
  •   
  • 下一篇文章: