BEMのCSSをSCSSで読みやすくネストする方法

まず押さえること

BEMとSCSSは、コンポーネント名に沿ってネストすると相性よく使えます。ブロックを起点にし、要素には &__、モディファイアには &-- を使います。たとえば .notice__title は .notice の中で &__title、.notice--compact は &--compact と書けます。

実践するときのポイント

ネストは浅く保つのが基本です。.notice .icon のような子孫セレクタは .notice { .icon { ... } } とできますが、階層を深くしすぎると最終的なセレクタが追いにくくなります。再利用する子要素なら、無理に深くネストせず独立したブロックにするほうが分かりやすい場合もあります。

見落としやすい点

疑似クラスや疑似要素も同じ考え方で、対象のルールの近くに &:hover や &::before を書きます。変換後はコンパイル結果のセレクタを確認すると、BEMのクラス名を保ったまま意図どおりになっているかを確かめられます。

次にやること

既存のBEM CSSをSCSSに直す最初の下書きには、CSS→SCSS変換ツールを使えます。デフォルトではソース順を維持するため、変換結果を確認しながら整えていく用途に向いています。

一度きりで終わらせず、必要な場面で繰り返せる手順として使うのがおすすめです。