[译]CSS 属性计算过程

原文连接：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 agent复制代码

Specificity 特异性：选择器特异性的计算方式以下：

• 内联样式 (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 转换

在实际绘制以前根据浏览器环境（如浏览器引擎、媒体类型、设备像素密度或操做系统）进行一些调整。一些常见的调整是将浮点数四舍五入为整数或根据可用字体调整字体的大小。