基於「內部」塊修飾符的樣式元素

根據「內部修飾符」從「外部」樣式化塊可以嗎？下面是一個例子：基於「內部」塊修飾符的樣式元素

HTML

<div class="Header"> 
    <div class="Button Header__button"> 
     Seperate Block with optional modifier Button--expanded 
    </div> 
</div>

button.css

.Button--expanded { 
    height: 100%; /* Default height of expanded buttons */ 
}

header.css

/* Expanded buttons within header have a different height */ 

/* Approach 1*/ 
.Header__button.Button--expanded { 
    height: 32px; 
} 

/* Approach 2*/ 
.Header__button--expanded { 
    height: 32px; 
}

Button--expanded類是由一些模塊JS動態添加的，它只知道控制/塊本身的Button。因此Approach 1作品「開箱即用」，而Approach 2將需要一些額外的JS以某種泡沫expanded狀態到Header控制，明確修改類Header__button--expanded設置爲Header__button元素...

我知道有沒有當涉及到這樣的決定時，絕對是對還是錯，但是如果有人能指出每種方法的利弊，我會非常感激。

來源

2017-08-04 suamikim

這取決於你想要的風格。

'--expanded'修飾符是否適用於所有按鈕？或者只爲Header__button？

如果你想只對頭部添加改性劑，使用方法2.

如果你想有更多的全球按鈕調節劑，使用方法1.

來源

2017-08-04 10:27:39 Olga

基於「內部」塊修飾符的樣式元素

回答

相關問題