Loading...

CSS 語言是專為定義網頁的版面設計(layout)而發明的,你可以透過它指定文件中各項 HTML 元件的視覺樣式。CSS 的全名是 Cascading Style Sheets,階層樣式表。而所謂的「階層式 (cascading)」,指的是我們可以在同一個元件上套用不同樣式,樣式與樣式之間則存在相對的階層關係。

許多人會認為 CSS 相對 JavaScript 來說,學習門檻比較低,因為 CSS 是立即可見的樣式效果,而 JavaScript 抽象程度較高的。

我們說 CSS 有「所見即所得」特性,某種程度是正確的,不過初學時的你是否曾陷入以下窘境呢?

  • 我的語法都正確,為什麼沒有選擇器指定的區塊樣式沒有改變?
  • 我查到網路上有人這樣寫,整套搬到我的架構裡卻沒有效果...
  • 聽說有個好用的東西叫 !important,樣式改不動的時候可以直接開大絕招硬上,殊不知為自己埋下一堆地雷...
  • 面對滿山滿谷的 CSS 屬性,拼命做筆記,要用時又忘記,還是得重新 Google,但又抓不準關鍵字...

CSS 學習的水深似乎沒有想像中的淺,ALPHA Camp 請到前端工程師 Jiang 來和大家分享他多年經驗總結出來的 CSS 學習框架與脈絡,有道是「聽君一席話,勝讀十年書」,希望能幫助你提升學習效率!

網頁程式設計入門,一文讀懂 HTML、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網頁開發的入口

更多技術學習資源
前端 JavaScript | HTML /CSS| Bootstrap | RWD | DOM | API | AJAX | Postman | jQuery
後端 HTTP / HTTPS | Node.js | MongoDB | Git | SQL / NoSQL | Docker
其他 VSCode | Web App | Leetcode