問(wèn)題描述

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

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

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

問(wèn)題解答

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

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

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

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

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

這么做有三個(gè)優(yōu)點(diǎn)：

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

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

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

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

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

我是用第一種,如果像white black這些簡(jiǎn)單三個(gè)重復(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}

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

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

用第一種吧，顏色只是你加的一個(gè)類，所以不會(huì)影響語(yǔ)義，你可以給ERROR加樣式，只是顏色直接用單獨(dú)給，這樣顏色的重用性也高

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

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

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

推薦用less

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

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