BEM: Wie kann sichergestellt werden, dass der CSS-Wert innerhalb eines Blocks die in einem anderen Block definierte Eigenschaft überschreibt?

Question

Ich verwende BEM und habe Probleme, Eigenschaften von einem Block zu bekommen, um Stile in einem anderen zu überschreiben. Ich weiß, dass einige vorschlagen, einen Modifikator für .button hinzuzufügen, aber es gibt Fälle, in denen bestimmte Eigenschaften auf eine einzelne Seite angewendet werden müssen, es lohnt sich also nicht, einen ganzen anderen Modifikator hinzuzufügen.

Hier ist ein Beispiel, nur mein Problem zeigen:

.button { 
    padding-left: 0; 
} 

Nun, wenn ich hinzufügen, gehen ein padding-left, es padding-left: 0; anstelle des Wertes bekomme ich das ist definiert unter .my-block verwenden möchten.

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

Was ist der beste Weg, um die padding-left: 5px;, um sicherzustellen, wird im Gegensatz angewendet padding-left: 0;?

Answer 1

Ich gehe davon aus, dass man Mischungen verwenden, so dass Markup wie folgt aussieht:

<button class="button my-block__button"> 

Wenn das der Fall ist, müssen Sie die Reihenfolge, in dem Bündel (.Taste Styling sollte immer vor .my-block__button gehen) zu gewährleisten.

In BEM Platform verwenden wir deps system, die uns diese Garantie gibt.