初級用不同的顏色組合

我有一種情況，設計師想出了一個設計，其中有一個主要按鈕有2種顏色組合。初級用不同的顏色組合

我正在寫我的CSS遵循BEM的原則，我發現很難命名這個按鈕的修飾符。

目前我有一個名爲.button--primary的修飾符類，它具有兩種顏色組合之一，但第二種顏色組合也應該適用於主按鈕。

通常，我只會製作兩個不同的修飾符（例如.button--midnight,.button--moss），但目前有很多JavaScript將類別.button--primary的按鈕附加到功能上。

我是否應該將.button--primary更改爲元素（例如button__primary），然後添加我給出的ealier示例的兩個修飾符？
或者我應該使用修飾符創建2個類（例如.button--primary--midnight，.button--primary--moss）？

來源

2015-10-19 diceler

你不能用'.button - primary'類來使用這兩個修飾符（'.button - midnight'和'.button - moss'）嗎？ – makshh

沒有什麼可以使用多個類/修飾符阻止你：

<element class="button button--primary button--midnight" />
和
<element class="button button--primary button--moss" />

但是這有它的缺點。

首先你會弄亂你的html，並使其不易讀。其次，使用兩種改性劑，迫使源秩序的CSS的重要性，所以在此設置中，最後一條規則將永遠是贏家：

.button { 
    color: black; } 

.button--primary { 
    color: green; } 

.button--moss { 
    color: yellow; 
    font-weight: bold; } 

.button--midnight { 
    color: crimson; 
    font-weight: bold; }

這將迫使你要記住這個限制，這本身就創建了一個維修問題。

所以，最好堅持使用多個修飾符不規則，所以你的情況，你可以這樣做：
<element class="button button--primary-midnight" />和<element class="button button--primary-moss" />
和可能使用SASS@extend爲button--primary和button--midnight之間共享共同的規則：

//SASS 
.button--primary { 
    color:white; 
    //other rules 
} 
.button--primary-midnight { 
    @extend .button-primary; 
    color:black; 
}

這將編譯爲：

/* CSS */ 
.button--primary, 
.button--primary-midnight { 
    color:white; 
    /* other rules */ 
} 
.button--primary-midnight { 
    color:black; 
}

來源

2015-10-19 13:11:49 robjez

我不認爲問題是如何解決OP的問題，因爲沒有技術障礙，它是更合適的解決方法。

首先在這個語句中有一個代碼異味。

通常我只想讓兩個不同的調節劑（如.button - 午夜，.button - 苔蘚），但目前還有大量的JavaScript其重視功能與類.button按鈕 - 初級。

因爲CSS和JavaScript緊密耦合，所以受另一方的約束。你的CSS不應該關心JavaScript，反之亦然。如果您需要將類作爲JavaScript鉤子，那麼您應該創建單獨的類，前綴爲js，例如

js-button--primary

此類不應該用於樣式，只能用於JavaScript。

其次，無論您選擇在CSS來解決這個問題，重要原則要牢記是：

與整個項目的辦法保持溶液。
項目中的另一名開發人員會理解我所做的事情。

只要您選擇的方法滿足這兩個條件，那麼它是一個合適的解決方案。

來源

2015-10-20 16:43:28

初級用不同的顏色組合

回答

相關問題