到底 CSS 還有必要語義么？若沒有必要，類名要怎樣寫？

01-03

hax在css開發者大會上分享了自己對css的命名，規範與可維護性的看法——css框架迷思。
在結合自身公司情況思考了一下，因為公司業務多，時間緊，前端只求速度實現，不求擴展語義，應中了hax說前端部門逐漸成了外包部門的說法。其後，很多編輯器都有定位到css類的能力。

個人認為 CSS 的命名主要應該考慮到識別度和模塊化。

接手過某新手的前端項目，一看就沒考慮過細分模塊化，也沒有考慮過命名方式，於是就出現了大量的 .yhzn_k .yhzn_l .yhzn_c、 .cpsu .cpsu2 .cpsu3 .cpsu4、.zcx .zcx_zcy .zcx_xe .zcx_hddt 這樣的類名。OMG，分析下這種命名有什麼壞處：

1，樣式效果硬編碼。沒有使用 CSS 的層疊特性，沒有抽出公用部分，直接 .cpsu .cpsu2 .cpsu3 .cpsu4 挨個設置樣式。不僅產生大量冗餘，而且如果需要修改某屬性需要修改很多地方，此外後端輸出的時候不是簡單的循環了，還要判斷加類。

2，根本不知道這表示的時哪一個模塊，需要搜索對應結構，或者查看對應結構搜索對應 CSS 代碼。

可以直接判定，這傢伙拿來設計稿就開始高，遇到不同 UI ，就新建類。不知道英文單詞的，就拿漢字拼音首字元命名，不懂 CSS 的命名習慣，使用 _ 而不是 - 來區分單詞（這個習慣可以直接看出寫代碼的人是真正前端還是後端兼職做的前端）。

如果是我，我會這樣：

1，通覽需求和設計稿，把整體分割成模塊，不同設計稿之間的類似模塊也都拿出來，結構和樣式取並集（例如 item a 有一個結構 s1，item b 有個結構 s2，item a 和 b 其他地方差不多，那麼我就做一個 item 結構帶有 s1、s2，只不過讓後端判斷不輸出某些結構。）

2，類名設計在不同模塊之間區分明顯，模塊的下級元素跟模塊命名有視覺關係。比如一個新聞列表 .list-news （或者 .news-list 更直觀符合語言習慣，但是 list 開頭更加表明這是一類什麼元素），每一條新聞可以命名為 .item-news （或者 .news-item），那麼這條新聞的 title 就可以命名為 .item-news-title or .news-item-title。如果覺得子類名稱太長，我通常會進行縮寫，就是取父模塊名字中單詞的首字母，.news-item 就可以用 .ni 代替，那麼 title 就可以是 .ni-title。由於 ni 並不是一個單詞，但是上面有類名 .news-item 就可以很自然的想到這是 news item 模塊的子元素。然後又有一個產品列表，那麼就可以命名為 .item-production 等。

3，模塊保持獨立，這塊 HTML 結構，無論放在哪裡都可以保持樣式的一致。那麼我們寫完模塊，剩下的工作就是在每個頁面中，規劃、自定義好大體的框架結構，然後把模塊複製進去即可。比如一個兩欄新聞列表，我只需要定義大體結構的尺寸（main sidebar）然後直接把一個新聞列表模塊和一個分頁模塊的結構粘貼進去即可。

說的有點多，差點跑題，我說這麼多的目的就是 CSS 的類名命名，並不是僅僅依靠你的英文水平，更重要的是對整個項目的模塊化的分割、可維護性的思考。當然，這些思考主要是面對需要長期維護的項目，或者 UI 組件等。

至於你介紹的，公司業務多，工作量大，需要前端快速實現。我覺得如果每次項目完成，整理一些可以共用的模塊出來，並寫上一些可能下次會用到的 CSS 代碼會更好。既然是一個公司，業務肯定有相同的地方，設計師也可能只是修改下顏色、字體就完事，這次整理出來，下次就是粘貼複製+簡單 CSS 修改了，所以仔細規劃 CSS 命名，應該還是有點意義的。

當然本人也是新手，上面只是個人見解，歡迎有不同意見的朋友和前輩指出~

的確，css的命名不能叫做語義化。前端的這些名詞真是被玩壞了，仔細想想其實就能搞明白了。

語義化的作用是什麼？首先其實是給機器識別用的，其次是給人識別用的，二者皆不可拋。前端涉及語義化一般指HTML的語義化。

而cssclass的命名，其實是為開發者服務的，跟機器沒什麼關係。

所以class的命名主要從這些方面考慮：

1. 方便團隊協作開發。（多人無縫切換開發）

2. 可維護性。（需求不斷迭代之後不至於讓代碼爛掉）

這兩個問題的學問其實很大，涉及到的問題方方面面，需要一步一步探索總結。

至少要有這些基本的意識：

1. 團隊的class命名規範化。不光是連字元之類的規範，還有一些常用class組合，常用命名等規範。

2. class命名層級的模塊化。一可以將模塊的樣式隔離，不產生全局樣式，影響團隊其他人的樣式；方便多人同時開發同一個頁面；二模塊的復用；

大過年的，不多說了。。。。。

語義化是為了便於閱讀和維護，你一個人寫個小項目，用hash值做類名都沒人攔你

首先，我必須求一下題主所說的講座。

我現在也在同一個階段，css如果命名，資源如果安排，等等這些問題，特別是面臨馬上部門的重組，這個問題就很迫切了，語義化應該指的就是命名的問題，我單位的任務往往也很緊，但緊並不是借口，我自己的做法是在閑的時候（並且心情不錯的時候~）就把所有的底層工作做好，比如題中所說的命名規範。

命名目前我是參考網易及bootstrap的做法，分模塊寫，特別感謝並贊同 @於江水的回答，利用前綴來標明不同的功能模塊，比如，柵格化系統用span或者col加-，所有的這些可以讓整個部門的人坐一來約定好，所有的工作其實就是就是讓代碼 更容易閱讀及維護 以及 可復用性。最好形成一個文字的東西，方便新同事或自己查詢。

當然，這樣的規範做下來不僅僅是命名規範，尺寸規範也可以在其中，這些也是可以給設計看的，整個流程按照一個規範來的話，任務時間可以減小很多很多。

最後提供一個網址供參考：

編碼規範 by @mdo

互勉~~~

傳統方式的幾種壞味道：

1.Duplicated Code, Data Clumps

明明是相同的東西，卻分布在世界各地，而不是放在同一處，減少重複代碼會精簡很多。傳統方式也很難復用，想要用到另一個項目幾乎不可能。用組合的方式去寫就可以復用，bootstrap就是在組合的基礎上實現了復用。

2.Large Class

如果用組合的方式去寫，就相當於把Large Class拆分成了很多小的Class，然後進行組合。

如果出現這種情況這麼辦？

& &


&
&
&
&
&
&

&
&

可以用sass或postcss先把f18 red bold mt20 pl15組合起來嘛。

.img1 .img2 .div1 .div2 這是非常讓人煩惱的css類名的命名方式

根據html的模塊來命名css類名是很好的習慣.

別覺得個人項目就隨便亂起.

你永遠不知道你的代碼什麼時候會讓人看到.

一旦以後你和別人開始項目開發.

習慣就成為你最好的依仗