問題描述

比如#ff0000,我該是用具體的顏色名來命名呢，還是用語義來命名呢？1.用顏色名命名: .c-red{color:#ff0000;}優(yōu)點：是什么顏色一眼就能看出來，并且html中可以到處復(fù)用缺點：如果我要修改#ff0000為#faf703(黃色)，那么c-red和顏色值就對不上了 ，而且如果我有多個紅色的時候不好區(qū)分。

2.用語義命名: .error{color:#ff0000;}優(yōu)點：改色值的時候不會影響語義缺點：不能到處復(fù)用，可能會需要定義多個相同色值的語義類

我覺得這兩種方式都有一定的局限性，不知道大家在工作中會怎樣定義顏色的類名呢？

問題解答

有一個網(wǎng)站，專門做顏色命名的，大家都遵循這個規(guī)范的話，應(yīng)該會好很多

http://chir.ag/projects/name-...

另外，我覺得應(yīng)該是兩種結(jié)合的，顏色可以作為變量來命名

我的想法是：讓設(shè)計師參與到前端構(gòu)建流程中

用 CSS 預(yù)處理器，把所有色值全部放在一個文件里，比如 color.scss，這個文件就交給設(shè)計師維護(hù)了，命名的事也都讓設(shè)計去操心。設(shè)計師在交付設(shè)計稿標(biāo)注時，也用顏色名去標(biāo)注，而不是色值。

這么做有三個優(yōu)點：

有一個文件記錄了部件的色值定義，有利于設(shè)計師自己保持設(shè)計的一致性和對項目 UI 整體顏色的把控

前端代碼效果的一部分交給了設(shè)計去控制，當(dāng)設(shè)計師想對項目的顏色進(jìn)行調(diào)整時，不用找程序員去改代碼，直接修改完自己的 color.scss，免去了溝通成本

程序員減少了閱讀成本（在標(biāo)注稿上讀六個字母，再寫到編輯器里，這方面我是很擔(dān)心出錯的，每個色值至少對比兩遍才放心）

實際操作時，程序員要注意自己的代碼里不能出現(xiàn)色值，保證自己的顏色都引用自 color.scss，這是墜吼的。

建議用第一種，我反正用的第一種。第二種太過語義化，如果我僅僅是想用紅色，似乎跟error沒關(guān)系對吧~

我是用第一種,如果像white black這些簡單三個重復(fù)的我就用重復(fù)的部分命名：

.black{color:#000}.black6{color:#666}.blackbg{background:#000}.black6bg{background:#666}.white{color:#fff}.whitee{color:#eee}.whitebg{background:#fff}.whiteebg{background:#eee}

如果像你說的red 我就在后面加1，2，3...：

.red{color:red}.red1{color:#ff0000;}.red2{color:#ff0001;}/*隨便寫的我不知道是不是紅色系，反正就這個意思*/回答5：

用第一種吧，顏色只是你加的一個類，所以不會影響語義，你可以給ERROR加樣式，只是顏色直接用單獨給，這樣顏色的重用性也高

第一種不錯不錯 學(xué)習(xí)了

分情況討論吧：整體來說命名偏向于語義化。第一種：如果你采用less,scss這種預(yù)編譯處理，建議使用placeholder去替換，如果沒有，也確實存在這種復(fù)用的情況，那就建議采納這種原子性的命名方式。

第二種： 如果像錯誤信息，提示信息，警告信息這種的，還是使用語義化命名吧。

推薦用less

@textRed: #ff0000;.classA { color: @textRed;}回答9：

.bg-black{ background: #333;}.bg-gray{ background: #999;}.text-gray{ color: #999;}...