css格式规范整理

u1jodi1q

命名空间规范

布局：以 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。

重视：

（1）不意见运用下划线 _ 进行连接

节省操作，输入的时候少按一个 shift 键能良好区分 JavaScript 变量命名

（2）字符小写

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

（3）选取器

当一个规则包括多个选取器时，每一个选取器独霸一行。、+、~、> 选取器的两边各保存一个空格。

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

.g-content ~ .g-footer{}

（4）命名短且语义化良好

针对选取器的命名，尽可能简洁且拥有语义化，不该该显现 g-abc 这种语义模糊的命名。

规则声明块

当规则声明块中有多个样式声明时，每条样式独霸一行。在规则声明块的左大括号 { 前加一个空格。在样式属性的冒号 : 后面加上一个空格，前面不加空格。在每条样式后面都以分号 ; 结尾。规则声明块的右大括号 } 独霸一行。每一个规则声明间用空行分隔。所有最外层引号运用单引号 ‘ 。当一个属性有多个属性值时，以逗号 , 分隔属性值，每一个逗号后添加一个空格，当单个属性值过长时，每一个属性值独霸一行。

数值与单位

当属性值或颜色参数为 0 – 1 之间的数时，可省略小数点前的 0 。当长度值为 0 时省略单位。十六进制的颜色属性值运用小写和尽可能简写。

例：

color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);margin: 0px auto；margin: 0 auto；color: #ffcc00；color: #fc0；

样式属性次序

单个样式规则下的属性在书写时，应按功能进行分组，并以 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 / bac公斤round / list-style / transform / animation / transition / …

Positioning 处在第1位，由于他能够使一个元素脱离正常文本流，并且覆盖盒模型关联的样式。盒模型紧跟其后，由于他决定了一个组件的体积和位置。

其他属性仅在组件内部起功效或不会对前面两种状况的结果产生影响，因此她们排在后面。

--------------连续更新--------------