前端 | CSS 样式书写规范

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;
}

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

原因是：

假设按照以下代码去执行

width: 100px;
height: 100px;
background-color: red;
position: absolute;

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

FAQ

参考文献

• css书写规范 - 追求极致 - 博客园
• vite + react + ts 手摸手做项目系列一 （项目配置篇） - 威武的大萝卜 - 博客园