CSS样式代码的书写规范 超级银河兄妹

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

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

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

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

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

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

color: rgba(255, 255, 255, .5);

当长度值为 0 时省略单位。

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 / background / list-style / transform / animation / transition / ...

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。