CSS 撰寫技巧及規範﹍維護心得整理

前端開發 CSS 寫久了之後，發現幾個麻煩的地方：

• 命名字串想破頭，要避免重複，又得能正確理解
• 日後維護修改時，要找到正確的區塊位置得花不少時間
• 壓縮過的 CSS 碼無法閱讀、不易維護，好閱讀的 CSS 碼太冗長

因此決定研究一套方便維護 CSS 碼的作法，本篇心得比較適合 Blogger 平台參考。

(圖片出處: pixabay.com)

一、CSS 命名

1. 有意義的英文單字

對於非開發人員而言，CSS 命名使用有意義的英文單字有很大的好處：

• 完整的單字也許字元數比較多，但至少一眼就能看出是什麼意思
• 為了減少字元數而使用自創的縮寫，例如相關文章 relatedPost 改用 rp，一段時間後也許認不出 rp 到底是相關文章還是隨機文章 (randomPost)
• 這篇「製作網頁表單﹍Grid 網格系統」的 class 使用了大量簡寫，例如 f1、w1、l1，久了一定記不起來 "f"、"w"、"l" 分別代表什麼意思

因為非開發人員不常維護 CSS 碼，所以最好在命名上要考慮到，怎麼樣可以讓自己在幾年後仍可一眼認出 CSS 命名。

而開發人員因為每天接觸這些 class 名稱，各種縮寫、簡寫都是吃飯工具，可以稍微放寬命名的要求。但如果需要協作的話，還是需建立一套有共識的命名方式。


2. 常用命名單字

有意義的英文單字遲早會用到詞窮，不小心就多處造成重複，可整理一份自己常用的字典檔，隨時查閱很方便。

也可參考這篇「前端人員必看CSS命名規範」：

• 「三、命名規範」這裡整理許多泛用、常用的單字，有中英對照，分類成這幾部分：
  
  • 頁面結構：例如 container、header、content...
  • 導航：例如 nav、topnav、subnav、sidebar...
  • 功能：例如 banner、title、status...
    
• 「一、文件規範」這裡有一些各區塊 css 檔命名的範例

3. 命名規範

class 名稱使用超過一個英文單字時，有多種方法將各個單字連結起來。這篇「CSS 書寫規範」整理了不少 CSS 書寫風格，例如：

• 駝峰命名風格：首字母大寫、其餘小寫
• 底線風格：用底線 "_" 連接每個英文單字
• 連字符風格：用 "-" 連接每個英文單字

使用 "-" 或 "_" 有其特定意涵存在，這裡先不贅述，我個人的命名習慣是，盡量不使用 "-" 符號，因為在維護時，用滑鼠操作比較花時間。

使用 "駝峰命名" 或底線的單字，滑鼠點兩下就能選取，可以節省很多操作時間。

二、CSS 順序

CSS 排列順序能夠形成一套邏輯的話，日後維護、尋找可以節省很多時間。

1. 區塊架構順序

可參考「CSS 團隊開發的最佳實踐」，這篇提供的 CSS 架構及順序很值得參考：

/*---GLOBAL---*/
/*---HEADER---*/
/*---NAV---*/
/*---CONTENT---*/
/*---SIDEBAR---*/
/*---FOOTER---*/

這篇還有更細的分類方法，總之這樣的分類很直覺，就是我們眼睛閱覽一個網站的移動順序，日後維護、查找 CSS 內容時會比較快。

在 GLOBAL 通用區塊，可以擺放例如 reset、架構、字體等等版面以外的 CSS。

在 CONTENT 主要內容區塊，部落格架構會分不同的頁面，例如文章頁面、索引頁面，Blogger 可以利用判斷式來個別區分不同頁面的 CSS。


2. 屬性順序

CSS 屬性的順序每個人的習慣都不同，有的派別依照字母順序，例如：

.box{border: 1px lolid #333; float:right; font-family: Arial; margin: 20px auto; }
但這種方式我比較不習慣，這篇「CSS代码重构与优化之路」→「3、书写顺序」，依照重要性來排列，我比較喜歡這樣的邏輯：

（1）位置属性(position, top, right, z-index, display, float等)
（2）大小(width, height, padding, margin)
（3）文字系列(font, line-height, letter-spacing, color- text-align等)
（4）背景(background, border等)
（5）其他(animation, transition等)

三、CSS 註解

「CSS 團隊開發的最佳實踐」這篇還提供了不少跟 CSS 註解相關的實用資訊

1. 便於搜尋

善用註解除了日後維護、閱讀文件說明方便，還有搜尋的妙用。例如想快速找到標頭區塊(header)的 CSS，我們若搜尋 "header" 可能會找到頭暈，因為有數不清的 header。另一種構想是標示中文註解 "標頭"，直接搜尋中文準沒錯，但切換中文輸入的速度遠比不上英文。

所以這篇的技巧很不錯，例如結合特殊符號 "=header" 的註解，搜尋起來就很快，字串不會重複。

因為 Blogger 有行動版判斷式，可輕易區分網頁版、行動版 CSS，那麼可以這麼設定標頭區塊的註解：

wHeader → 代表網頁版標頭區塊
mHeader → 代表行動版標頭區塊
使用這樣的技巧，一秒鐘就能搜尋到要維護的 CSS 區塊。


2. 標示特殊資訊

這篇還提供一個很棒的觀念，把網頁所有用到的顏色，用註解保存起來，例如：

/*---顏色
綠色 #38761d
藍色 #0b5394
紅色 #990000
---*/
日後要重複使用時會節省很多查詢的時間。

四、CSS 壓縮

美化過的 CSS 碼好閱讀、但佔空間，壓縮過的 CSS 碼無法閱讀、維護，所以我習慣取折衷的方式，例如使用這個 CSS 線上工具：

• http://www.codebeautifier.com/

壓縮選項選擇「High (moderate readbiligy, smaller size」，會將每則 CSS 描述內容個別壓縮為一行顯示，而非全部壓縮為一行。這樣既維持了可讀性，又大幅減少了網頁載入的字元數。

五、CSS 模組化

當網站的 CSS 數量越來越龐大時，為了有效開發及維護，產生了許多模組化的派別。這篇「CSS 的模組化方法」介紹了相當多種模組，例如：

• 物件導向 OOCSS
• 結構化命名 SMACSS
• 區塊化命名 BEM

這篇「Functional CSS 經驗分享」提供一種另類的 Functional CSS，像是把 CSS 用積木組裝，類似 Bootstrap。

很難說哪一種會是最佳解，也許要每個都試試看才能找到讓自己最順手的模組。

以部落格平台來說，要管理的 CSS 數量沒那麼多，我會拿 SMACSS 的概念當基礎，但使用自己習慣的命名邏輯，來組合出順手的管理架構。

六、CSS 技巧

最後補充一些 CSS 使用技巧。

1. RESET

• CSS Reset 與 CSS normalize

除了讓各個瀏覽器效果一致，使用 CSS Reset 還有很多好處。部落格常會使用各種不同版型，不同的模版會自帶奇奇怪怪的 CSS 預設參數，用 Reset 可清掉、或重設我們習慣的元素參數。


2. CSS 權重

• CSS 權重說明-1
• CSS 權重說明-2

使用 important 是最偷懶的 CSS 修改技巧，久了就會嚐到苦果。因此有必要瞭解 CSS 權重的概念，利用權重覆蓋 CSS 效果，將來才容易維護。


3. CSS 變數

較新版本的瀏覽器都能支援「CSS 變數」，那麼常用的 CSS 參數可以在開頭設定好，各處都能方便的套用，可節省不少時間~

更多 CSS 相關技巧：