[譯] 從沒有人告訴過個人 CSS 小知識

• 原文地址：Things nobody ever taught me about CSS.
• 原文做者：Charlie Gerard
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Xuyuey
• 校對者：Fengziyin1234, xionglong58

這篇文章絕對不是對任何一個曾經和我共事過的人的批判，僅僅是我最近在作一些我的研究的時候學到的關於 CSS 的一些要點。

---

有不少開發者並不怎麼關注 CSS，我想這已經不是什麼新鮮事了。經過網上的各類對話，或者與朋友和同事聊天的時候你均可以觀察到這個現象。

---

然而，在社區中，咱們學到的不少知識都是來自於同伴的分享，有時我會意識到不少關於 CSS 的基礎知識在社區中歷來沒有被分享過，由於其餘人歷來不肯意花時間在 CSS 上深究。

爲了解決這個問題，我決定對 CSS 作一些研究並整理出一部分概念，我認爲這些概念對於更好地理解和編寫 CSS 代碼頗有幫助。

這份清單確定沒有那麼全面，它只包含了過去幾天我學到的新知識，分享出來但願可以幫助到你們。

術語

在全部的編程語言中都有一些用來描述概念的特定術語。CSS 做爲一門編程語言也是同樣的，瞭解這些術語對於溝通交流甚至只是爲了提升本身的知識儲備都是頗有幫助的。

後代選擇器

你知道樣式選擇器中間的小空格嗎？它實際上還有一個名字，它的名字是後代選擇器。

佈局，繪製和渲染層合併

這些術語更多地和瀏覽器渲染有關，但它仍然很重要，由於一些 CSS 屬性會影響渲染進程的不一樣步驟。

1. 佈局

佈局步驟負責計算元素在屏幕上佔用的空間大小。修改 CSS 中的「佈局」屬性（例如：寬度、高度）意味着瀏覽器須要檢查其餘全部的元素並「重排」頁面，也就是說從新繪製受影響的區域並將他們合併在一塊兒。

2. 繪製

此過程是爲元素的可視化部分（顏色、邊框等）填充像素的過程。繪製元素一般在多個圖層上完成。

改變「繪製」屬性不會影響頁面的佈局，因此瀏覽器會跳過佈局步驟但仍然會執行繪製。

繪製常常是整個渲染進程中代價最昂貴的部分。

3. 渲染成合並

在渲染層合併這個步驟中，瀏覽器須要按照正確的順序繪製圖層。由於有一些元素會發生重疊，因此這個步驟對於確保元素按照預期順序顯示很是重要。

若是你改變了一個既不須要佈局也不須要繪製的 CSS 屬性，那麼瀏覽器只須要作渲染層合併操做。

有關不一樣 CSS 屬性觸發的詳細信息，你能夠在 CSS Triggers 上查看。

CSS 性能

後代選擇器或許會很是耗能

取決於程序的大小，僅僅使用沒有什麼特殊性的後代選擇器代價會很是昂貴。瀏覽器會檢查每一個後代元素是否匹配，由於後代這種關係不只限於父子之間。

例如：

瀏覽器會評估頁面上的全部連接，最終定位到那個實際位於 #nav 元素內的連接。

一種更高效的方法是在 #nav 元素中的每一個 <a> 元素上添加一個特定的 .navigation-link 選擇器。

瀏覽器從右到左讀取選擇器

我以爲我應該知道這個，由於這個聽起來很重要，但我並不知道……

解析 CSS 時，瀏覽器會從右到左解析 CSS 選擇器。

讓咱們看看下面的例子：

採起的步驟以下：

• 匹配頁面上的每一個 <a> 元素。

• 找到被 <li> 元素包裹的 <a> 元素。

• 使用以前的匹配結果並將範圍縮小到那些被 <ul> 元素包裹的結果。

• 最終，在上面的選項中篩選出那些被類名爲 .container 的元素包裹的結果。

從上面的步驟咱們能夠看出，靠右的選擇器越具體，瀏覽器過濾和解析 CSS 屬性的效率就越高。

爲了提升上面例子的性能，咱們能夠在 <a> 標籤上面添加相似 .container-link-style 的類名來替換 .container ul li a。

儘量避免修改佈局

更改某些 CSS 屬性可能會須要更新整個頁面的佈局。

例如，width、height、top、left（也稱爲「幾何屬性」）等屬性就須要從新計算佈局和更新渲染樹。

若是在大量的元素上更改這些屬性，那麼計算和更新他們的位置/大小須要花費很長的時間。

當心繪製的複雜性

在繪製方面，一些 CSS 屬性（例如：blur）會比其餘屬性花費更高的代價。能夠考慮使用其餘更有效的方法來實現相同的效果。

代價高昂的 CSS 屬性

一些 CSS 屬性會比其餘屬性花費更高的代價，這意味着他們須要更長的時間來繪製。

其中一些屬性以下：

• border-radius

• box-shadow

• filter

• :nth-child

• position: fixed

這並不意味着你根本不該該使用他們，但你應該明白，若是一個元素使用其中某些屬性並將渲染數百次，會影響到渲染性能。

順序

順序在 CSS 文件中很重要

讓咱們看下面的 CSS 代碼：

而後再來看看這段 HTML 代碼：

咱們會發現影響渲染效果的不是選擇器在 HTML 代碼中出現的順序，而是選擇器在 CSS 文件中出現的順序。

評估 CSS 性能的一個好方法是使用瀏覽器的開發者工具。

---

若是你使用的是 Chrome 或者 Firefox，能夠打開開發者工具，轉到 Performance 標籤，並記錄當你加載頁面或與頁面互動時發生的狀況。

資源

在爲這篇文章作研究時，我遇到了一些很是有意思的工具，以下所示：

CSS Triggers —— 該網站列出了一些 CSS 屬性，以及在應用程序中使用和修改這些屬性對性能的影響。

Uncss —— 一種能夠從 CSS 文件中刪除未使用的樣式的工具。

Css-explain —— 一種能夠解釋 CSS 選擇器的小工具。

Fastdom —— 批處理 DOM 讀/寫操做的工具，能夠加快佈局性能。

差很少就是這樣啦！但願它有意義！

---

感謝閱讀！ 🙏

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。