前端開發 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 線上工具：
壓縮選項選擇「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 預設參數，用 Reset 可清掉、或重設我們習慣的元素參數。
2. CSS 權重
使用 important 是最偷懶的 CSS 修改技巧，久了就會嚐到苦果。因此有必要瞭解 CSS 權重的概念，利用權重覆蓋 CSS 效果，將來才容易維護。
3. CSS 變數
較新版本的瀏覽器都能支援「CSS 變數」，那麼常用的 CSS 參數可以在開頭設定好，各處都能方便的套用，可節省不少時間~
更多 CSS 相關技巧：