CSS 語言是專為定義網頁的版面設計（layout）而發明的，你可以透過它指定文件中各項 HTML 元件的視覺樣式。CSS 的全名是 Cascading Style Sheets，階層樣式表。而所謂的「階層式 (cascading)」，指的是我們可以在同一個元件上套用不同樣式，樣式與樣式之間則存在相對的階層關係。
許多人會認為 CSS 相對 JavaScript 來說，學習門檻比較低，因為 CSS 是立即可見的樣式效果，而 JavaScript 抽象程度較高的。
我們說 CSS 有「所見即所得」特性，某種程度是正確的，不過初學時的你是否曾陷入以下窘境呢？
- 我的語法都正確，為什麼沒有選擇器指定的區塊樣式沒有改變？
- 我查到網路上有人這樣寫，整套搬到我的架構裡卻沒有效果…
- 聽說有個好用的東西叫 !important，樣式改不動的時候可以直接開大絕招硬上，殊不知為自己埋下一堆地雷…
- 面對滿山滿谷的 CSS 屬性，拼命做筆記，要用時又忘記，還是得重新 Google，但又抓不準關鍵字…
CSS 學習的水深似乎沒有想像中的淺，ALPHA Camp 請到前端工程師 Jiang 來和大家分享他多年經驗總結出來的 CSS 學習框架與脈絡，有道是「聽君一席話，勝讀十年書」，希望能幫助你提升學習效率！
入門：如何建立扎實的基本功？
追本溯源，理解瀏覽器預設樣式
很多人會覺得學 CSS 就是要寫出很多厲害的樣式，不過其實每家瀏覽器都有提供的預設樣式，不過基礎簡樸的網頁早已不能滿足現在人的需求，因此我們才需要漸漸開發更多的 CSS 屬性和撰寫技巧。
我們寫的 HTML/CSS 是實作在瀏覽器裡，在你撰寫任何樣式表之前，Blink、 Gecko、 WebKit 等各大瀏覽器引擎都有在 W3C 定義的標準 之上，提供預設樣式 ( 下圖截取自 Browser Default Styles 網站)：
Jiang 建議大家，在鑽研更多的切版技巧前，一定對瀏覽器的預設樣式有所理解，認識 各 HTML 元素在瀏覽器裡的預設行為 (ex. div 會佔掉一整列、 span 乖乖包覆內容、ul 前面會有一個黑圓點…)，才能更加理解我們會續學習的屬性是在修改什麼、前端工程師為什麼需要面對跨瀏覽器兼容性問題。
學習與實作架構：「由大到小，由外而內」
「看一招、學一招」是 CSS 能力養成中普遍的路徑，然而這也會讓部分學習者感受到學習似乎有些零碎、鬆散或容易迷失在玲瑯滿目的屬性裡。在此，Jiang 為大家歸納出 CSS 的學習與實作架構：
此框架的核心理念是將頁面「由大而小、由外而內」地降維拆分，並基本上將頁面拆分成四個層級：
- 排版層級
- 區塊層級
- 內容層級
- 動畫層級
雖然動畫層級的特效往往令人更目眩神迷，不過 Jiang 建議大家，紮實的 CSS 學習應從基本的元素排版定位開始掌握。這四個層級基本上可以涵蓋一個頁面樣式所需要的所有 CSS 屬性類型。接下來的幾週你很可能接觸和複習到不少屬性，可以試著按照個四個層級來歸納和記憶唷！
CSS 教學語法入門：認識階層樣式表與Box model 介紹
練習：如何找練功資源？
雖然框架可以幫助我們整理脈絡，但其實要精通任何知識都免不了需要刻意「記憶」和「練習」。
Jiang 和大家分享一個他增添功力的技巧：到 CodePen, Pinterest, Behance, Dribble 等平台關鍵字：「web design card」、「card UI design」，可以找到許多類似上圖的 UI 設計圖，從當中挑選自己覺得順眼的小元件來熟悉不同的切版策略、屬性，做小範圍練習，之後要設計比較大的空間時，不只手感和自信心，連審美眼光都會自然會提升。
實戰：如何提升撰寫效率和品質？
實務中，當要開發一個完整頁面時，Jiang 也會推薦按照先前介紹過四個層級順序「排版>區塊>內容>動畫」，先將各大區塊的相對定位先擺好，再深入每個區塊內部細節。
概念上，每個區塊都會經歷一個「排版>區塊>內容>動畫」的 loop。採用流水式的話，容易忽略掉區塊之間的交互關係 (例如螢幕尺寸調整時，區塊位置需要互換)，而陷入牽一髮動全身的窘境中，需要再回頭改掉已經做好的細節。
提升程式碼可讀性、可維護性
這很可能是我們過去寫的 CSS 程式碼，想到什麼屬性就加進來，每個選擇器裡面的順序都不太一樣，回頭時可能還要花一下眼力，才能找到要改修屬性：
/*bad example*/
.targetClassName, .other-target {
color: #333;
font-size: 18px;
top: 100px;
left: 100px;
line-height: 20px;
display: flex;
justify-content: center;
border-radius: 3px solid #ccc;
background: #fff;
width: 100px;
height: 20px;
position: relative;
}
學了 CSS 學習架構以後，我們可以運用其「由外而內」的脈絡，將屬性按照「排版>區塊>內容>動畫」的順序一一擺入，並適當加入一些註解：
/*good example*/
/* Basic comment */
.target-classname,
.other-target {
/* Positioning */
position: relative;
top: 100px;
left: 100px;
/* Display */
display: flex;
justify-content: center;
/* Box Model */
width: 100px;
height: 20px;
border-radius: 3px solid #ccc;
/* Font or other */
font-size: 18px;
line-height: 20px;
color: #333;
background: #fff;
}
這麼一來，屬性好找多了，從區塊外部 (如定位、Display、Box Model等)，然後慢慢往內部 (如：文字、行高、背景色等)。關於註解，並不是必須的，但是如果 CSS 很大一串時，可以提供其他開發者甚至是自己，一個依循的說明，無形中也可以建立開發者之間的開發共識。
CSS 的 class 與 id 命名上，如果團隊沒有特殊規定，一般的通則是建議使用 Kebab-case，也就是像烤肉串一樣用 – 來連接每個單字，Camel Case (駝峰式) 則留給 JavaScript 變數命名：
/* Camel Case，不建議 */
.targetClassName {
…
}
/* Kebab Case，建議 */
.target-class-name {
…
}
當多個選擇器套用相同樣式時，建議要讓每個選擇器逗號後面斷行，另外「選擇器與括號」之間和「屬性名後面的冒號與值」之間都要保留一個空白，增加易讀性：
/* Bad */
.class-one, .class-two, .class-three{
position:relative;
}
/* Good */
.class-one,
.class-two,
.class-three {
position: relative;
}
以上是幾個基本 CSS 屬性撰寫好習慣，這些基本規則也有可能會因為開發團隊的撰寫習慣而有所不同，但是在學習時優先養成習慣絕對是利大於弊！除了方便除錯外，也能夠提高 CSS 的可讀性
展望：CSS 進階學習主題從哪裡開始？
CSS 預處理器
當樣式需求高、CSS 程式碼變得複雜時，人們尋找「更有效率的 CSS 撰寫/管理方式」，而創造 SASS/SCSS 等 CSS 預處理器，我們可以在 SASS/SCSS 檔案中撰寫一些更高階的邏輯語法，如：變數定義、迴圈、條件式等等，然後透過編譯將這些語法轉換成原本瀏覽器能夠讀取的 CSS。除了可以提升寫作效率，也因為加入巢狀結構更加方便管理。
模組化概念的建立
當你的專案漸漸變大、 CSS 碼越來越長，你開始會遇到「選擇器的定義很亂」、「不知不覺寫了很多重複性的樣式」，甚至「樣式相互污染」，在不希望有變化的地方出現變化等的情形。
為了解決這些問題，前端開發者發展出幾套命名原則如 BEM、OOCSS、SMACSS 等的概念，不同團隊有自己的偏好，不過這些原則大同小異，目的都是將「模組化」，以下我們以 OOCSS 來說明什麼是模組化，別擔心你沒學過什麼是 OOCSS，我們熟悉的 Boostrap 就是使用這套命名規則，你可以回想使用 Boostrap 時的經驗來理解：
如上圖所示，我們把「容器樣式」和「內容樣式」拆開設定，就像製作了一個個積木，遇到要用的地方，在從我們的積木倉庫挑出來放進結構裡。如此一來，這些樣式不只可以被重複使用，當我們想把整個網站的 primary color 從藍色換成橘色時，也只要改一個地方，管理起來是否方便許多呢？
總結
CSS 看似容易入手，我們好像在第一天就學過了所有東西，不過卻非常需要一次一次的經驗累積幫助我們撥雲見日，把這門知識摸得更清楚。本文提供的 CSS 學習方法希望能幫助你在這樣的架構下快速累積知識、建立基礎、建立系統化的概念，在這條修煉之路上走得更遠、更穩健
三分鐘小測驗，找到你學習HTML、CSS、JavaScript網頁開發的入口
