Elément de style basé sur le modificateur de bloc "inner"

Question

Est-ce que le style d'un bloc "extérieur" est correct en fonction d'un "modificateur interne"? Voici un exemple:

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; 
} 

La classe Button--expanded est ajoutée dynamiquement par certains JS modulaires qui ne connaissent que le contrôle/bloc Button lui-même. Par conséquent Approach 1 œuvres « de la boîte » tout Approach 2 aurait besoin d'un peu supplémentaire JS pour en quelque sorte bulle l'état expanded jusqu'à la commande Header pour régler à l'élément Header__button la classe modificateur explicite Header__button--expanded ...

Je sais qu'il n'y a pas Absolument vrai ou faux quand il s'agit de telles décisions, mais je serais vraiment reconnaissant si quelqu'un pourrait souligner les avantages de chaque approche.

Answer 1

Cela dépend de ce que vous voulez styler.

Le modificateur '--expanded' est-il commun à tous les boutons? Ou seulement pour Header__button?

Si vous voulez ajouter le modificateur uniquement pour en-tête, utilisez la méthode 2.

Si vous voulez avoir des boutons de modification plus globale, l'approche utilisation 1.