小说网,有声

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

淺析Bootstrap的CSS類名設(shè)計(jì)

在構(gòu)建類似 Bootstrap 這樣的 CSS 系統(tǒng)時(shí)，保持系統(tǒng)的簡(jiǎn)單性、穩(wěn)定性、靈活性是相當(dāng)重要的。這并非易事，尤其對(duì)于大型團(tuán)隊(duì)和項(xiàng)目來(lái)說(shuō)，組件的數(shù)量可能會(huì)變得相當(dāng)龐大。為了改善這種狀況，你不妨考慮用前綴式類名取代鏈?zhǔn)筋惷?/p>

在使用鏈?zhǔn)筋惷?方案時(shí)，你可能會(huì)把一系列特定組件的 CSS 選擇符寫(xiě)成這樣：

 
 
  
  .success { ... }  
  
  .btn.success { .. }  
  
  .alert.success { ... }

我們?cè)谶@里設(shè)置了一個(gè)全局基礎(chǔ)類 .success，它可能涵蓋了成功按鈕和成功提示框之間的所有共性。然后，在單個(gè)組件層面，我們又需要對(duì)它進(jìn)行擴(kuò)充或覆蓋。但是，這種完全開(kāi)放式的類名和鏈?zhǔn)斤L(fēng)格令開(kāi)發(fā)者面臨一些困擾和潛在痛點(diǎn)：

這個(gè)基礎(chǔ)類到底代表什么
哪些元素會(huì)在根層級(jí)受到影響（譯注：啥意思？）
哪些元素可以把 .success 類鏈到自己身上
它是否可以被進(jìn)一步擴(kuò)展到更多的組件上
假如一個(gè) .success 的實(shí)例要用白底綠字，而另一個(gè)要用綠底白字，怎么辦？

而且這些問(wèn)題還只是冰山一角。這種方案未必很差，但如果可擴(kuò)展性、簡(jiǎn)單性和靈活性是你的***需求，這可能就不是***的辦法。此時(shí)，前綴式類名方案可能更加適合你。

前綴式類名 將開(kāi)發(fā)者引入一種更簡(jiǎn)單、更易維護(hù)的方向，從而構(gòu)建一個(gè)可擴(kuò)展的 CSS 系統(tǒng)。當(dāng)我們拋棄常規(guī)的基礎(chǔ)類的方式，并將每個(gè)組件的樣式用前綴限制起來(lái)時(shí)，我們的代碼會(huì)變成這樣：

 
 
  
  .btn-success { ... }  
  
  .alert-success { ... }

這樣一來(lái)，基礎(chǔ)類被設(shè)定在組件級(jí)別，而不是整個(gè)系統(tǒng)級(jí)別。換句話說(shuō)，我們的基礎(chǔ)類變成了 .btn 和 .alert，而不是 .success。所有組件之間都不會(huì)出現(xiàn)樣式和行為上的相互干擾，因?yàn)槲覀儼呀M件具備“成功狀態(tài)”視為貫穿整個(gè)系統(tǒng)的一種概念。這就是說(shuō)，每個(gè)組件在“成功”狀態(tài)下的樣式，只有在概念層面才是相通的；而對(duì)于如何 實(shí)現(xiàn) 這個(gè)樣式，是被約束在每個(gè)獨(dú)立的組件內(nèi)部的。不用操心通用的樣式還會(huì)在哪里使用，也不用顧慮不可意料的副作用，這種方式使得每個(gè)組件更加穩(wěn)定和靈活。

構(gòu)建組件是一項(xiàng)非常具有策略性并且注重細(xì)節(jié)的工作，在一個(gè)類似 Bootstrap 的系統(tǒng)中，組件需要天生具備獨(dú)立性，以提高模塊分離度和可定制性。我們通過(guò)這種方式來(lái)打造更好的代碼和一個(gè)令人愉悅的項(xiàng)目。

我的體會(huì)

作者視角

我自己在 CMUI ***版中，基本上使用的是文章開(kāi)頭所說(shuō)的“鏈?zhǔn)筋惷憋L(fēng)格。比如說(shuō)，一個(gè)大號(hào)按鈕的結(jié)構(gòu)可能是這樣的：

 
 
  
  Large button

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

 
 
  
  Large button

最開(kāi)始我并沒(méi)有覺(jué)得這兩者有什么不同——前一個(gè)類名用于掛載框架預(yù)定義的按鈕樣式，后一個(gè)類名用于指定按鈕的尺寸。把 Bootstrap 源碼中所有的 .btn-lg 替換成 .cmBtn.cmLarge，不就跟我的 CMUI 一樣了嘛？我甚至覺(jué)得 Bootstrap 的類命名有點(diǎn)啰嗦，.btn 和 .btn-lg 中的 btn- 不是重復(fù)了嗎？還是 CMUI 干凈利落啊！

然而，看完這篇文章，我似乎體會(huì)到 Bootstrap 這種設(shè)計(jì)的好處。我的理解可能并不是原作者的出發(fā)點(diǎn)，但也不妨列舉出來(lái)，僅供參考。

用戶視角

這兩種類名風(fēng)格的差異并不在于源碼是怎么寫(xiě)的，而是在于開(kāi)發(fā)者（這里指使用 Bootstrap 的開(kāi)發(fā)者）在看到類名時(shí)的反應(yīng)。我的理解是，不同的命名，對(duì)開(kāi)發(fā)者的暗示是不同的。

開(kāi)發(fā)者們并不總是會(huì)按照組件文檔的示例來(lái)編寫(xiě)組件的結(jié)構(gòu)代碼。比如說(shuō)，某些時(shí)候他們手邊沒(méi)有文檔（或不想找文檔），又或者他們所期望的樣式在文檔中并沒(méi)有列出。他們可能會(huì)抱著一種試試看的心態(tài)，嘗試修改或組合手頭的幾個(gè)類名，以期產(chǎn)生某種新的樣式效果。

如果類名是寬泛的（比如 CMUI 中的 .cmLarge），就很容易被拿來(lái)嘗試——比如開(kāi)發(fā)者會(huì)給一個(gè) ul.cmList 元素增加 .cmLarge 類并期望得到一個(gè)大號(hào)的列表，但實(shí)際上 CMUI 并沒(méi)有提供這種組合！這破壞了開(kāi)發(fā)者的預(yù)期，導(dǎo)致心理受挫，以致最終放棄這個(gè)組件庫(kù)（夸張了點(diǎn)哈）。

但如果類名是被一個(gè)“組件級(jí)”前綴限定的（比如 Bootstrap 中的 .btn-lg），那么它被開(kāi)發(fā)者拿去組合到其它組件身上的可能性就相當(dāng)?shù)?。即使某個(gè)異想天開(kāi)的開(kāi)發(fā)者試圖把 .btn-lg 改成 .dropdown-lg 并應(yīng)用到一個(gè)下拉菜單上，當(dāng)他失敗時(shí)，他應(yīng)該也已經(jīng)做好心理準(zhǔn)備了罷。

結(jié)語(yǔ)

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

你如何評(píng)論這兩種類名風(fēng)格呢？不妨留下你的觀點(diǎn)吧！

文章題目：淺析Bootstrap的CSS類名設(shè)計(jì)
網(wǎng)頁(yè)路徑：http://fisionsoft.com.cn/article/dheioco.html

新聞中心

我的體會(huì)

作者視角

用戶視角

結(jié)語(yǔ)

其他資訊