基於上下文定義樣式

Question

我瞭解上下文樣式的基本概念，以及爲什麼您希望基於父母和兄弟姐妹定義樣式。但在某些情況下，它似乎只是增加了額外的css，我恨不得不寫，除非必要。以此爲例。說我有我的網站上一個紅色的按鈕，我定義爲：

.button.red{ 
background-color: #ff0000; 
color: #fff; 
} 

因此，我可以把下面的代碼的任何地方：

<button class="button red">submit</button> 

但我聽說，這是最好的做法刪除「紅色」或「綠色」風格從你的HTML和使用上下文樣式。但是這會導致大量額外的css來基於它的父母來編寫每個紅色或綠色按鈕。任何人都可以闡明爲什麼要這樣做，或者這不一定是最佳做法。

Answer 1

好吧，我覺得有什麼東西需要先被清理，這就是語義造型。你在這裏做的只是把一個靜態樣式應用到一個按鈕上，這很好，但你給它的名字是非常具體的。你說的是一些按鈕會變成紅色，並將它們命名爲這樣。

但是更進一步，如果您決定該按鈕的類型應該是藍色？還是綠色？你應該做的是使用一個類名解釋爲什麼你正在設計這個按鈕。從這個角度考慮，並不是所有的紅色按鈕都是主要操作，而是主要操作按鈕是紅色的。因此，要從Bootstrap's術語中竊取，您不會給出「按鈕紅色」的類，而是「按鈕主要」或「按鈕錯誤」的類 - 用於說明您實際嘗試完成的內容的含義。

這有後來好處，讓你做的事情，如宣稱「一個彈出式容器內的所有主鍵將是綠色的」

.popup .button.primary {} 

這樣的分離使事情在你的代碼看起來更漂亮讓你開始一般，並隨着你的需求變得更加具體化，變得更具體，這從程序和文體的角度都是有用的。

Answer 2

該指導線的理由是，必須有某種原因爲什麼你希望你的按鈕是紅色的，或者爲什麼你希望你的段落縮進，或爲什麼您的清單應隔開。

當類屬性中的文本說明HTML片段描述的內容時，HTML簡單地讀取得更好。關注點分離的想法，一個很好接受的做法決定了

• HTML應該包含結構信息僅供
• CSS應該包含表象信息僅供
• 腳本應該包含交互式信息只

帶顏色的HTML違反了這種做法。

實際上，可能沒有理由說明爲什麼你的CSS應該放大。你總是可以說

button.warning, p.notice, ul.stop { 
    color: red 
}