淺析 Bootstrap 的 CSS 類名設計

譯者注：最近在重新設計一個 UI 框架，因此也在考察一些類似專案的特徵和要素。在讀到《Bootstrap 編碼規範》時，順著連結發現了其作者 @mdo 的一篇文章，其中講到 CSS 類名的設計思路。

在構建類似 Bootstrap 這樣的 CSS 系統時，保持系統的簡單性、穩定性、靈活性是相當重要的。這並非易事，尤其對於大型團隊和專案來說，元件的數量可能會變得相當龐大。為了改善這種狀況，你不妨考慮用字首式類名取代鏈式類名。

在使用 鏈式類名 方案時，你可能會把一系列特定元件的 CSS 選擇符寫成這樣：

我們在這裡設定了一個全域性基礎類 .success，它可能涵蓋了成功按鈕和成功提示框之間的所有共性。然後，在單個元件層面，我們又需要對它進行擴充或覆蓋。但是，這種完全開放式的類名和鏈式風格令開發者面臨一些困擾和潛在痛點：

• 這個基礎類到底代表什麼
• 哪些元素會在根層級受到影響（譯註：啥意思？）
• 哪些元素可以把 .success 類鏈到自己身上
• 它是否可以被進一步擴充套件到更多的元件上
• 假如一個 .success 的例項要用白底綠字，而另一個要用綠底白字，怎麼辦？

而且這些問題還只是冰山一角。這種方案未必很差，但如果可擴充套件性、簡單性和靈活性是你的最高需求，這可能就不是最好的辦法。此時，字首式類名方案可能更加適合你。

字首式類名 將開發者引入一種更簡單、更易維護的方向，從而構建一個可擴充套件的 CSS 系統。當我們拋棄常規的基礎類的方式，並將每個元件的樣式用字首限制起來時，我們的程式碼會變成這樣：

這樣一來，基礎類被設定在元件級別，而不是整個系統級別。換句話說，我們的基礎類變成了 .btn 和 .alert，而不是 .success。所有元件之間都不會出現樣式和行為上的相互干擾，因為我們把元件具備“成功狀態”視為貫穿整個系統的一種概念。這就是說，每個元件在“成功”狀態下的樣式，只有在 概念 層面才是相通的；而對於如何 實現 這個樣式，是被約束在每個獨立的元件內部的。不用操心通用的樣式還會在哪裡使用，也不用顧慮不可意料的副作用，這種方式使得每個元件更加穩定和靈活。

構建元件是一項非常具有策略性並且注重細節的工作，在一個類似 Bootstrap 的系統中，元件需要天生具備獨立性，以提高模組分離度和可定製性。我們通過這種方式來打造更好的程式碼和一個令人愉悅的專案。

---

我的體會

作者視角

我自己在 CMUI 第一版中，基本上使用的是文章開頭所說的“鏈式類名”風格。比如說，一個大號按鈕的結構可能是這樣的：

而在 Bootstrap 中，類似的元素是這樣的：

最開始我並沒有覺得這兩者有什麼不同——前一個類名用於掛載框架預定義的按鈕樣式，後一個類名用於指定按鈕的尺寸。把 Bootstrap 原始碼中所有的 .btn-lg 替換成 .cmBtn.cmLarge，不就跟我的 CMUI 一樣了嘛？我甚至覺得 Bootstrap 的類命名有點囉嗦，.btn 和 .btn-lg 中的 btn- 不是重複了嗎？還是 CMUI 乾淨利落啊！

然而，看完這篇文章，我似乎體會到 Bootstrap 這種設計的好處。我的理解可能並不是原作者的出發點，但也不妨列舉出來，僅供參考。

使用者視角

這兩種類名風格的差異並不在於原始碼是怎麼寫的，而是在於開發者（這裡指使用 Bootstrap 的開發者）在看到類名時的反應。我的理解是，不同的命名，對開發者的暗示是不同的。

開發者們並不總是會按照元件文件的示例來編寫元件的結構程式碼。比如說，某些時候他們手邊沒有文件（或不想找文件），又或者他們所期望的樣式在文件中並沒有列出。他們可能會抱著一種試試看的心態，嘗試修改或組合手頭的幾個類名，以期產生某種新的樣式效果。

如果類名是寬泛的（比如 CMUI 中的 .cmLarge），就很容易被拿來嘗試——比如開發者會給一個 ul.cmList 元素增加 .cmLarge 類並期望得到一個大號的列表，但實際上 CMUI 並沒有提供這種組合！這破壞了開發者的預期，導致心理受挫，以致最終放棄這個元件庫（誇張了點哈）。

但如果類名是被一個“元件級”字首限定的（比如 Bootstrap 中的 .btn-lg），那麼它被開發者拿去組合到其它元件身上的可能性就相當低。即使某個異想天開的開發者試圖把 .btn-lg 改成 .dropdown-lg 並應用到一個下拉選單上，當他失敗時，他應該也已經做好心理準備了罷。

結語

這樣看來，Bootstrap 的做法確有它的好處，我的 CMUI 2.0 不妨也試試看。

你如何評論這兩種類名風格呢？不妨留下你的觀點吧！