- 原文地址：How To Learn CSS
- 原文作者：Rachel Andrew
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：Mcskiller
- 校對者：Reaper622, Qiuk17
摘要：你不需要強行記住每一個 CSS 屬性和值，有很多地方可以方便你快速去查閱。但是記住一些基礎的知識點會讓你使用起來更加得心應手。本文旨在引導你如何學習 CSS。
我遇到很多人叫我給他們推薦 CSS 各個知識點的教程，或者問我應該怎麼學習 CSS。我也看到很多人對 CSS 的部分內容感到困惑，一部分原因是因為他們對語言的過時認知。鑑於 CSS 在過去的幾年間改變了很多，也是時候來更新你掌握的知識了。即便 CSS 只佔你所做工作的一小部分（因為你在棧的別處工作），CSS 就像你想他們最終在螢幕上看到的那樣，所以值得合理更新。
因此，本文旨在概述 CSS 的要點以及提供一些資源，以進一步學習現代 CSS 開發的主要內容。其中許多都是 Smashing Magazine 上的東西，但我也提供了其他的一些資源，其中包括人們關注的 CSS 要點。這不是一個完整的初學者指南或者絕對涵蓋所有知識點的文章。我的目標是以幾個重要知識點展示現代 CSS 的廣度，這將有助於你學習其他語言。
語言基礎知識
對於 CSS 的大部分內容，你不需要擔心學習屬性和值。你可以在需要時查詢它們。然而，學習 CSS 需要一些關鍵的基礎知識，如果沒有這些基礎，你會很難去理解它。所以它真的值得你去花時間理解，從長遠來看，它將會為你的學習帶來諸多便利。
選擇器，不僅僅是 Class
選擇器顧名思義，它 選擇 文件的某些部分，以便你可以將 CSS 應用到上面。雖然大多數人都熟悉使用 Class，或者直接設定諸如 body 之類的 HTML 元素，但是這裡還有大量更高階的選擇器可以根據文件中的位置來選擇元素，可能是因為它們在某些元素的後邊，也可能是表格中的奇數行。
Level 3 規範中的選擇器（你也許聽過它們被稱為 Level 3 選擇器）具有 優秀的瀏覽器相容性。更多有關使用各種選擇器的詳細資訊，請參考 MDN Reference。
一些選擇器的效果就像你在文件中運用 class 選擇器一樣。例如，p:first-child 就像你在第一個 p 元素中新增了一個 class 一樣，這些被稱為 偽類 選擇器。偽元素 選擇器就好像一個元素是動態插入的，例如 ::first-line 的作用方式就類似於在第一行文字週圍包裹 span。但是，如果這一行的長度發生了變化，它將會重新應用，如果插入該元素則不會出現這種情況。這些選擇器可能會非常複雜，在下面的 CodePen 中是一個偽元素用偽類連結的例子。我們使用 :first-child 偽類定位第一個 p 元素，然後使用 ::first-line 選擇器選擇該元素的第一行，就好像在第一行的周圍新增了一個 span 讓它變粗並改變顏色。
檢視由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 第一行。
繼承和層疊
當有許多規則應用於一個元素上時，層疊決定了到底按哪一個規則執行。如果你曾經無法理解一些 CSS 樣式為什麼沒有被應用，那可能是因為你沒有理解層疊的概念。層疊與繼承密切相關，它定義了哪些屬性是應該被子元素繼承的。它也和優先順序有關：不同的選擇器有不同的優先順序，當有多個選擇器可以應用到同一個元素上時，優先順序決定了哪一個能夠被成功應用。
提示：要是想了解全部內容，推薦去看看 MDN 的 CSS 簡介中的 層疊和繼承。
如果你正努力將一些 CSS 樣式應用到一個元素上，那麼使用瀏覽器的開發者工具是最佳方法，看看下面的例子，其中有一個 h1 元素由 h1 選擇器選擇並將標題設定為橙色。我還使用了一個 class 設定 h1 顏色為 rebeccapurple。這個 class 優先順序更高，所以 h1 是紫色的。在開發者工具中，你可以看見元素選擇器被劃掉，因為它並沒有被應用。所以現在一旦你看見瀏覽器開始應用你的 CSS（但其他東西阻止了它導致沒有正常顯示），你就可以找到原因了。
檢視由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 優先順序。
開發者工具可以幫助你檢視為什麼有些 CSS 樣式沒有成功應用到元素上（檢視原圖）
盒模型
CSS 都是關於盒子的。每個顯示在螢幕上的東西都有一個框，盒模型描述瞭如何計算出框的大小 —— 考慮 margin，padding，和 border。標準的 CSS 盒模型使用給定的元素寬度，然後在該寬度加上 padding 和 border 的寬度 —— 也就是說元素佔據的空間比你設定的寬度要大。
最近，我們已經可以選擇使用 border-box 盒模型，該模型使用元素上給定的寬度作為螢幕上可見元素的寬度。任何 padding 或者 border 上的設定都將從邊緣向內進行設定。這讓許多佈局更加便利。
在下面的 Demo 中有兩個盒子。它們的寬度都是 200px，其中 border 是 5px，padding 是 20px。第一個盒子使用的是基礎盒模型，所以總體寬度是 250px。第二個盒子使用的是 border-box 盒模型，所以實際寬度就是 200px。
檢視由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 盒模型。
瀏覽器的開發者工具能夠再一次幫助你瞭解你正在使用的盒模型。下面的圖片中，我使用 Firefox 的開發者工具去檢查預設的 content-box 盒模型。開發者工具告訴我這是一個正在使用的盒模型然後我能夠看見它的大小和我設定的 border 和 padding 是怎樣新增到寬度上的。
開發者工具幫助你瞭解盒子為何具有特定尺寸，以及你正在使用的盒模型（檢視原圖）
提示：在 IE6 之前，Internet Explorer 預設使用 border-box 盒模型，padding 和 border 讓內容偏離了給定的寬度。所以在那段時間許多瀏覽器都在使用不同的盒模型！不過現在你不必為了瀏覽器之間的互通所擔心，事情已經有所改善，我們已經不需要因為瀏覽器的不同而使用不同方法計算寬度。
在 CSS Tricks 上有一篇很好的對於 盒模型及其大小 的解釋，以及在你的站點中 全域性使用 border-box 盒模型 的最佳方法。
常規流
如果你的文件由一些 HTML 標籤組成然後你在瀏覽器中開啟它，它應該是有可讀性的。標題和段落會從一個新行開始，單詞中間由空格隔開組成句子。用於格式化的標籤，就像 em，不會破壞一句話的流。這些內容都以 常規流佈局 或者說塊狀流佈局展示。每一部分內容都處於“流”中；每一個元素都會依次排放，不會重疊在一起。
如果你合理運用這種特性的話，你的工作將會變得更加輕鬆。這也是為什麼 從正確標記的 HTML 文件開始 有道理的原因之一，由於常規流和內建樣式表被瀏覽器所遵守，你的內容會從可讀的地方開始。
格式化上下文
一旦你有了一個使用常規流佈局的文件，你也許會想改變某些內容的外觀。那麼你可以通過修改元素的格式化上下文來進行改變。舉一個簡單的例子，如果你想所有段落都連在一起而不是每一段都新建一行，你可以將 p 元素設定為 display: inline 將其從塊更改為行內格式化上下文。
格式化上下文基本上定義了容器外部和內部型別。外部控制元素與頁面上其他元素的共同表現，內部控制子元素的外觀。打個比方，當你設定 display: flex 時，你設定外部為塊級格式化上下文，並且子元素為 flex 格式化上下文。
提示：最新版本的 Display 規範更改 display 來顯式的宣告內部和外部值。因此，以後你可能會用到 display: block flex;（block 是外部的，flex 是內部的）。
在 MDN 上閱讀更多有關 display 的內容。
進入或脫離常規流
CSS 中的元素可以被分為，“在流中”或者“脫離流”。流中的元素被賦予了不被其他元素干擾的獨立空間。如果你通過調整浮動或者定位讓一個元素脫離流，那麼它的空間可能會被其他在流中的元素佔用。
對於使用絕對定位的元素，這是最明顯的。如果你設定一個元素 position: absolute 那它就脫離流了，然後你需要去保證脫離流的元素沒有和流中的元素重疊，不然你的佈局可能會變得難以理解。
檢視由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 脫離流：絕對定位。
然而，浮動元素也會脫離流，然後後續的內容將會圍繞浮動元素的盒邊線佈局，你可以通過在後面元素的盒中設定背景顏色來看到它們已經提升位置並且忽略了之前的浮動元素的空間。
檢視由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 脫離流：浮動。
你可以在 MDN 上閱讀更多關於 在流中和脫離流的元素 的內容。要記住的重要一點是，如果你讓一個元素脫離流，你需要自己去管理元素是否重疊，因為塊級流佈局不再適用。
佈局
十五年來，我們一直在 CSS 中進行佈局而沒有一個專門設計的佈局系統。現在這一切已經發生了改變。我們現在擁有了一個功能完善的佈局系統包括 Grid 和 Flexbox，還有多列布局和用於實際目的的舊佈局方案。如果你還不理解 CSS 佈局，請移步 MDN 學習佈局 或者在 Smashing Magazine 查閱我的文章 從零開始的 CSS 佈局。
不要以為像 grid 和 flexbox 這樣的方法在某種程度上來說是競爭關係。為了更好的佈局，你可能會發現有時候適合使用 flex 元件有時候又適合使用 grid。有時，你也會想要使用多列布局。所有這些都只是你的可選項。如果你感覺一種佈局不太合適，通常情況下這是一個好現象，說明你應該去試試其他不同的佈局方案。我們習慣於“矯正” CSS 樣式來達到想要的效果，而導致我們忘記了本來就有的那些可選項。
佈局是我的主要專業領域，我在 Smashing Magazine 和其他地方寫了很多文章來幫助掌握新的佈局。除了上面我提到的佈局文章，我還有一個 Flexbox 系列文章 —— 從 當你在建立一個 Flexbox 伸縮容器時會發生什麼 開始。在 Grid by Example 上，我有一大堆 CSS Grid 的小例子 —— 以及一個視訊教程。
此外 —— 特別是設計師們 —— 請檢視 Jen Simmons 和她的 Layout Land 系列視訊。
對齊
我一般把對齊和佈局分開，不過我們大多數人都是把對齊作為 Flexbox 的一部分來看的，其實這些屬性可以應用到任何一個佈局方法上，認真學習以下部分比思考用“Flexbox 對齊”或者或者"CSS Grid 對齊"要好得多。我們有一組對齊屬性可以在日常中使用；不過由於不同的佈局它們的效果可能會有些許不同。
在 MDN 上，你可以深入研究 盒對齊 以及它是如何在 Grid（網格佈局），Flexbox（彈性佈局），Multicol（多行佈局）和 Block 佈局（塊佈局）中實現的。在 Smashing Magazine 上，我有一篇專門介紹 Flexbox 對齊的文章：Flexbox 中有關對齊你需要知道的一切。
尺寸
我在 2018 年中的大部分時間都在談論內部和外部尺寸規範，以及它與 Grid 和 Flexbox 的關係。在 Web 開發中，我們習慣於使用固定長度或者百分比來設定尺寸，因為這是我們能夠做到的使用數值完成的網格類佈局。但是，現代佈局方式能幫我們完成很多空間操作 —— 只要我們讓它們這麼做。理解 Flexbox 如何分配空間（或者 Grid 的 fr 單位是如何工作）是很有必要的。
在 Smashing Magazine 中，我寫了幾篇文章，關於 佈局中的尺寸 以及適用於 Flexbox 的 那個彈性盒子有多大？
響應式設計
我們的新佈局方法 Grid 和 Flexbox 與我們老的佈局方法相比，會使用更少的媒體查詢，因為它們是靈活的，不需要我們去修改元素的寬度，它們會根據檢視或者元件大小進行自適應。但是你可能會希望在某些地方新增斷點來增強你的設計。
這裡是一些簡單的 響應式設計 指南，檢視我的文章 在 2018 年使用媒體查詢來進行響應式設計。我介紹了一下媒體查詢的許多用法，以及一些未來在 Level 4 中會出現的新媒體查詢功能。
字型和排版
和佈局一樣，網路上關於字型的使用在去年也發生了巨大的變化。可變的字型在這裡讓單個字型檔案可以產生無數種變體。想了解它們是什麼以及它們的工作方式，請檢視 Mandy Michael 的精彩講解：可變字型和 web 設計的未來。另外，我還推薦去看看 Jason Pamental 的 動態排版與現代 CSS 和可變字型。
想要探索可變字型和它們的功能，可以去看看 來自微軟的一個有趣的演示 提供了許多案例來嘗試可變字型 —— Axis Praxis 就是一個知名的例子（我還喜歡 Font Playground）。
當你開始使用可變字型時，這篇 MDN 上的指南 可以給你一些幫助。以及閱讀 Oliver Schöndorfer 的 使用備選 Web 字型實現可變字型 學習如何給不支援可變字型的瀏覽器返回解決方案。Firefox 開發者工具字型編輯器 也支援可變字型。
變形和動畫
CSS 變形和動畫絕對是我們所需要知道的基礎內容。我不經常使用它們，語法已經消失在了我的腦海中。不過謝天謝地，MDN 上的資料幫助了我，我也建議直接從 MDN 上的指南 使用 CSS 變形 和 使用 CSS 動畫 開始。Zell Liew 也有一篇優秀的文章 解釋 CSS 過渡。
想發掘一些有趣的內容，請訪問 Animista。
關於動畫可能最令人困擾的就是應該怎麼去實現。除了 CSS 的部分，你可能還需要涉及到 JavaScript，SVG，或者 Web Animation API，這些事情可能往往會被混為一談，在 An Event Apart 錄製的 選擇你的動畫冒險 中 Val Head 解釋了這些。
使用小抄作提示，而不是學習工具
當我提到 Grid 或者 Flexbox 資源時，我經常看到有回覆說它們 不能 在沒有特定小抄的情況下使用 Flexbox。我不反對使用小抄來幫助記憶語法，我也分享了我自己的一些小抄。主要問題是，在你照著小抄複製程式碼時你很可能會忘記思考它是如何做到的。然後，當你遇到一個屬性實現出了意想不到的效果時，你會感到莫名其妙甚至覺得可能是這個語言的問題。
如果你發現自己的 CSS 在做一些奇怪的事情時，大膽的問 為什麼。建立一個簡單的測試用例來突出顯示問題，問問更加熟悉規範的人。我被問到的許多 CSS 的問題都是因為使用者堅信程式碼正在以不同的方式在執行。這也是我為什麼要談論對齊和尺寸，許多問題就出在這些地方。
沒錯，CSS 中確實有一些奇怪的問題。這是一個多年來都在不斷髮展的語言，有些事情我們不能改變 —— 除非我們有時光機。但是，一旦你掌握了這些基礎知識，然後理解了其中的原理，你就能更輕鬆的處理這些問題。
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。