前端使用原子類的優劣？

做者：於江水
連接：https://www.zhihu.com/question/22110291/answer/20328000
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

《編寫高質量代碼 Web前段開發修煉之道》一書中，提倡並提供了一套原子類，因而我就開始在我的和外包的項目中開始使用原子類。

用的多了，你就會明白原子類的優劣以及如何使用了。下面是個人幾點感悟：

原子類的缺點：

1，維護困難。相似 m20（表示 margin 20px ） 這樣的超級經常使用的原子類，會遍及網頁中的不少 div，若是你想讓他們變成 margin 15px，要麼替換 .m20{} 中的 margin 20px （失去 m20 自己的意義），要麼把 html 中的 m20 批量替換成 m15 。再給你一個要求，把一部分替換成 m15。恐怕只能一個一個粘貼複製了吧？

2，代碼冗餘。包括題主給出的和《編寫高質量代碼》一書中給出的原子類實例同樣，爲了靈活，把經常使用的字體都定義成了 f*、經常使用的尺寸都定義了 m* 和 p* 等。但實際上只會用到其中的幾個，剩下的都是冗餘代碼。這對於中度代碼潔癖的我來講，是很難受的，雖然只是幾十行代碼。

3，控制困難。當我第一次接觸原子類而且用此重寫了我一個很是簡單的 WordPress 主題的時候，我幾乎開始膜拜原子類。那個主題實在是簡單，因此我幾乎沒有寫 CSS ，只是在 模版文件 中的 div 中添加了衆多的原子類就完成了佈局。可是當我打算修改某個元素的樣式時，有點崩潰，我究竟要用原子類的方式，仍是傳統的選擇器？

1）若是用原子類，那麼我須要定義新的原子類（一般不能隨便修改以前的原子類），而後將新的原子類寫到 html 標籤的後面，來覆蓋以前的樣式。這樣，就會遇到相似 <div class="aa bb cc dd ab ad cd sd">...</div> 的標籤，Great！
2）用原子類構造選擇器。這樣就不用定義新的原子類了，可是你的 CSS 選擇器看起來會像下面這樣：.aa .bb .cc .ad.ab .ce{} 你肯定不會眼花？
3）沒辦法，只能針對要修改的元素設置一個對應的類，例如 <h1 class="mb20 f14 fb post-title">...</h1> 而後對 .post-title 來定義要指定的特殊樣式，而後將 post-title 類添加到全部須要的 h1 標籤中。這時你會發現，我爲何不把前面的 mb20 f14 fb 原子類裏面的三條語句一塊寫進 post-title 類中？這樣修改的話只須要修改這一個類就能夠了，而不須要找到 html 中，增刪原子類。

就像 CSS 禪意花園那樣，最好的 CSS 代碼，是與 HTML 無關的，而原子類，讓你在修改編寫 CSS 的時候，增長了不少 HTML 的操做，這是最大的缺陷。

原子類的優勢：

原子類也有至關多的優勢，可是並非全部的原子類。

1，便於抽出複用代碼，提升代碼複用程度。clearfix 類就是最好的一個例子，將一段用來清除浮動的 CSS 編寫成 clearfix 類，在須要清除浮動的 元素 中，增長這個類就能夠。相似的還有其餘使用場景。

2，CSS 框架的應用。不少前端框架的 CSS 部分，特別是網格系統，都是原子類的具體應用。


原子類的實際應用：

原子類其實不是一種工具，而是一種編寫 CSS 的思想，即： 抽出高度複用的樣式模塊，獨立成一個原子類，爲對應的模塊添加。 CSS 前端框架作的就很是好。對於一個前端項目，按鈕部分來講，能夠定義一個 btn 類做爲按鈕初始化（將 a 或者 button 、input 初始化，加圓角、去邊框、加 cursor 等），而後定義諸如 btn-blue 、 btn-red 這樣的類來細化按鈕的樣式。那麼對於整個項目的全部按鈕，就只須要加兩個類就能夠實現樣式。 =============下面是我本身的一個不正式的用法================ 另外一個應用場景，就是代替命名。在近期的一些項目中，主體部分每每分兩欄而且有多種主體樣式（假設 .main-blog .main-page ）。因此我定義了 .left .right 類，默認屬性分別爲 float:left float:right 。針對不一樣的主體樣式，就能夠構造以下的 CSS 代碼： .main-blog .left{ .... } .main-blog .right { .... } .main-page .left{ .... } .main-page .right { .... } 這雖然涉及了前面所說的 缺點3 中的內容，可是解決了程序員最大的難題：命名。並且語義還算比較清晰，用起來感受還不錯，能夠試用一下。