原文链接：advancedweb.dev/books/advan…
一点看法：CSS 语法本身易于学习，这也导致了很多人并没有认真了解 CSS 的一些基本概念。随手复制一段 CSS，样式 OK 就过了，最终导致项目中出现了大量重复的样式定义，!important 乱用等等。了解 CSS 属性的计算过程，可以帮助我们以可预测的方式编写更优雅和可维护的代码。
CSS 属性的计算过程分为以下几个步骤：
1. Collecting 收集
收集给定元素的所有样式声明，包括 user agent、用户或者网站作者指定的样式。这些声明需要经过各种过滤和验证，以确保适用于该文档，并且语法是有效的。
2. Cascading 级联
基于上一步获取的无序声明列表，根据以下标准将它们按照优先级降序排列：
Origin & Importance - 来源和重要性：根据声明的来源（user agent, user, author, transition, animation）和 !important 注释。务必谨慎使用 !important。
- Transition
- User agent + `!important`
- User + `!important`
- Author + `!important`
- Animation
- Author
- User
- User agentSpecificity 特异性：选择器特异性的计算方式如下：
- 内联样式 (1000)
- ID 选择器 (100)
- 类/属性选择器、伪类 (10)
- 类型选择器、伪元素 (1)
- 通用选择器 (0)
Order of Appearance 出现顺序: 特异性相同时，以最后一个声明为准
- 引入 (imported) 的样式表在适当的位置被替换
- 外部 (link) 样式表按链接顺序
- 内联样式在所有样式表之后
3. Defaulting 预设
当没有为元素声明 CSS 属性时执行该步骤，有几种方法：
- 初始值：CSS 属性的初始值在其定义表中定义，初始值的使用取决于是否继承。
- 继承：继承属性从父元素获取值，根继承属性获取初始值，非继承属性始终获取初始值。
- 显式默认值：可以使用 initial 关键字重置属性，inherit 显式继承，unset 移除所有声明。
4. Resolveing 解析
我们会使用许多相对单位 (auto, em, rem, vh)、相对 URL 和一些人类可读的关键词 (small, normal, bold) 来获取灵活性，该步骤尝试将所有值绝对化，而无需进行文档布局、网络请求或从父元素之外的其他地方获取值：
- 相对单位乘以适当的首选值
- 关键词根据定义被替换
- 百分比乘以参照值
- 相对 URL 解析为绝对 URL
5. Formatting 格式化
格式化整个文档，完成上一步中剩余的工作。该步骤特别关注诸如元素之间的相对位置、auto、flex等布局，需要大量的计算，产生几乎完全可用的绝对值。
6. Transforming 转换
在实际绘制之前根据浏览器环境（如浏览器引擎、媒体类型、设备像素密度或操作系统）进行一些调整。一些常见的调整是将浮点数四舍五入为整数或根据可用字体调整字体的大小。
