[譯]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 轉換

在實際繪製以前根據瀏覽器環境（如瀏覽器引擎、媒體類型、設備像素密度或操做系統）進行一些調整。一些常見的調整是將浮點數四捨五入爲整數或根據可用字體調整字體的大小。