有一個網站，專門做顏色命名的，大家都遵循這個規範的話，應該會好很多

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

另外，我覺得應該是兩種結合的，顏色可以當作變數來命名

我的想法是：讓設計師參與前端建置流程

用 CSS 預處理器，把所有色值全部放在一個檔案裡，像是 color.scss，這個檔案就交給設計師維護了，命名的事也都讓設計去操心。
設計師在交付設計稿標註時，也用顏色名稱去標註，而不是色值。

這麼做有三個優點：

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

• 前端程式碼效果的一部分交給了設計去控制，當設計師想對專案的顏色進行調整時，不用找程式設計師去改程式碼，直接修改完自己的color.scss，免去了溝通成本

• 程式設計師減少了閱讀成本（在標註稿上讀六個字母，再寫到編輯器裡，這方面我是很擔心出錯的，每個色值至少對比兩遍才放心）

建議用第一種，我反正用的第一種。
第二種太過語意化，如果我只是想用紅色，似乎跟error沒關係對吧~

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

.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;}/*随便写的我不知道是不是红色系，反正就这个意思*/

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

第一種不錯不錯 學了

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

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

推薦用less

@textRed: #ff0000;
.classA {
    color: @textRed;
}

雷雷