122.CSS书写顺序及其好处

CSS的顺序有多种排列组合；一堆零散的无序的东西，往往是不好记忆的。有序的东西方便记忆、检查。

今天来讲讲css顺序。它重要吗？
对于提升多人协作的效率，是重要的。
哪怕对于个人来说，有一个合理的顺序，是方便记忆、检查纠错的。

很多人一起工作，总要遵守某些规则。

军队、公司，纪律是第一的；对于代码上来说，大家代码看起来都尽可能像是自己写的，看起来亲切。

对于自己来说，其实也是一种效率上的提高。

软件开发并不只有开发的过程，很多时候，是在维护；自己都看不懂自己以前写的是什么的大有人在。

那么，这个世界上有那么多元的顺序，我们怎么去排序就是下一个问题了。

css的元素太多了，直接排序，对于普通人类的大脑来说也是不好记忆的。

排序之前，我们先分个类。

如何分类？

下面两者有时候是矛盾的，正确的选择，需要权衡利弊：

• 它要是方便记忆的，它们的分类便于区分
• 它要是还能提升运行的效率，那就更好不过了

浏览器的加载顺序（仅写出和css相关的）

• 1、解析html -> 生成dom树
• 2、针对每个dom节点，样式计算：将dom和其对应的css样式的 配置项绑定起来
• 3、针对整个页面，布局（施工了）：从上到下、从左到右，开始铺设每个dom节点。

根据上述的渲染原理，我们可以思考来如何优化我们的顺序。

网上给出了解答：

• 1、位置相关：z-index/position/top/left/bottom/right
• 2、大小：width/height/padding/margin
• 3、文字：font-size/font-family/letter-spacing/white-space
• 4、背景：background/border
• 5、其他（特效、透明度）：transition、opacity

以下是我个人的一些思考

对于大小部分，我们还可以继续细化。

对外的，先写；对内的，后写。
示例代码：

.test {
  margin-top: 10px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

---

参考文档：

• 博客园文章
• CSDN文章

---

complete.