BEM: Comment s'assurer que la valeur CSS dans un bloc remplace la propriété définie dans un autre bloc?

Question

J'utilise BEM et j'ai des problèmes pour obtenir des propriétés d'un bloc pour remplacer les styles dans un autre. Je sais que certains pourraient suggérer d'ajouter un modificateur pour .button, mais il y a des cas où certaines propriétés doivent être appliquées à une seule page, il n'est donc pas utile d'ajouter un autre modificateur.

Voici un exemple, juste pour montrer mon problème:

.button { 
    padding-left: 0; 
} 

Maintenant, quand je vais ajouter un padding-left, il devient padding-left: 0; au lieu de la valeur que je veux utiliser cela est défini dans .my-block.

.my-block { 
    &__button { 
    padding-left: 5px; 
    } 
} 

Quelle est la meilleure façon d'assurer la padding-left: 5px; soit appliquée par opposition à padding-left: 0;?

Answer 1

Je suppose que vous utilisez des mélanges de sorte que le balisage ressemble à ceci:

<button class="button my-block__button"> 

Si tel est le cas, vous devez vous assurer de l'ordre dans le faisceau (le style de .button doit toujours aller avant .my-block__button).

En BEM Platform nous utilisons deps system ce qui nous donne cette garantie.