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;
   100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

参考文档:


complete.

原文地址:https://www.cnblogs.com/can-i-do/p/13172475.html