css样式表的书写规范

在学完css基础后，为了更好的写代码，学习书写规范必不可少，以下是部分规范：

命名空间规范

1.布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
2.状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
3.工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
4.组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
5.钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，并以 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 / background / list-style / transform / animation / transition / ...
Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。