3
BEMを使用する際によくあることは何ですか?私はどこでも見つけることができません。 SCSSでは、ブロックの修飾子の.block__element dependent
を作れますか?要素をBEMのブロック修飾子に依存させることはできますか?
たとえば、.header__text
は常に白ですが、.header
の修飾語が.header--bgblue
の場合のみです。
<div class="header">
<div class="header__text">
Default color is black
</div>
</div>
<div class="header header--bgblue">
<div class="header__text">
I want this to be white because it's inside header--bgblue
</div>
</div>
また、各要素に個別の要素修飾子を付けるのがベストプラクティスですか?
<div class="header header--blue">
<div class="header__text header__text--white">
I want this to be white because it's inside header--bgblue
</div>
</div>
この場合、それはわずかな労力ですが、より多くの依存関係(例:より多くの要素が含まれている)がある場合は、これが道ですか?
ありがとうございました。私が後者を選んだ場合、これを行うSCSSの方法は何ですか?これは今私が持っているものです:.header {& - bgblue {...}; &__テキスト{...}};どうすれば2つを組み合わせることができますか?または、SCSSのネストされた表記の外でこれを行う必要がありますか? – albert105
私はこれを次のようにすることができます:.header {& - bgblue {.header__text {color:#fff}}; &__ text {color:#000}};ちょっと醜いとscssの構造を台無しにするが、ちょっと..それは仕事を行います。 – albert105