html - css中怎么命名颜色比较好？

Question

比如#ff0000,我该是用具体的颜色名来命名呢，还是用语义来命名呢？
1.用颜色名命名: .c-red{color:#ff0000;}
优点：是什么颜色一眼就能看出来，并且html中可以到处复用
缺点：如果我要修改#ff0000为#faf703(黄色)，那么c-red和颜色值就对不上了 ，而且如果我有多个红色的时候不好区分。

2.用语义命名: .error{color:#ff0000;}
优点：改色值的时候不会影响语义
缺点：不能到处复用，可能会需要定义多个相同色值的语义类

我觉得这两种方式都有一定的局限性，不知道大家在工作中会怎样定义颜色的类名呢？

Answer 1

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

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

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

Answer 2

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

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

這麼做有三個優點：

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

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

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

實際操作時，程式設計師要注意自己的程式碼裡不能出現色值，確保自己的顏色都引用自 color.scss，這是墜吼的。

Answer 3

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

Answer 4

我是用第一種,如果像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;}/*随便写的我不知道是不是红色系，反正就这个意思*/

Answer 5

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

Answer 6

第一種不錯不錯 學了

Answer 7

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

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

Answer 8

推薦用less

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

Answer 9

雷雷