CSS 样式书写规范

介绍

本章主要简单介绍了 CSS 样式书写顺序规范，后续还会增加其它规范（持续更新中）。

使用

推荐书写顺序如下：

  • 定位属性 - display | position | float | left | top | right | bottom | overflow | clear | z-index 等
  • 自身属性 - width | height | margin | padding | border | background 等
  • 文字样式 - font-family | font-size | font-style | font-weight | font-varient | color 等
  • 文本属性 - text-align | vertical-align | text-wrap | text-transform text-indent | text-decoration | letter-spacing | word-spacing | white-space | text-overflow 等
  • css3属性 - content | cursor | box-shadow | text-shadow | border-radius | transform 等

示例：

div {
	/* 定位属性 */
    position: absolute;
    z-index: 9;
    
	/* 自身属性 */
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #ccc;

	/* 文字样式 */
    font-size: 16px;
    color: pink;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

目的是：减小浏览器 reflow（回流），提高浏览器渲染 DOM 的性能

原因是：

假设按照以下代码去执行

width: 100px;
height: 100px;
background-color: red;
position: absolute;
  • 1.
  • 2.
  • 3.
  • 4.

当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流（reflow）的影响而重新排位。

FAQ

参考文献