SCSSのネストでセレクタが強くなりすぎるとき

まず押さえること

SCSSのネストはスタイルシートを読みやすくできますが、階層を一つ増やすたびに、ブラウザへ渡されるセレクタも長くなります。コンポーネント内では自然に見える記述でも、変換後にはあとから上書きしづらいセレクタになっていることがあります。ネストを避けるのではなく、必要な関係だけを表すことが大切です。

実践するときのポイント

BEMの要素を &__、モディファイアを &-- で書く場合や、&:hover のような状態をまとめる場合はネストに向いています。一方で、レイアウト用の親要素や子孫クラスを何段も重ねると注意が必要です。.panel { .content { .card { .title { ... } } } } のような記述は、HTMLの構造が少し変わるだけで使いにくくなり、別の場所で見出しを再利用しづらくなります。

見落としやすい点

変換後のCSSを確認し、意図したクラス名よりもセレクタがかなり長くなっていないかを見ましょう。再利用したい部分は独立したブロックへ戻すと、あとから修正しやすくなります。上書きのために !important やさらに深いセレクタが必要になったら、ネストが深すぎるサインかもしれません。

次にやること

CSS→SCSS変換ツールで読みやすい下書きを作った後、「この変換後セレクタは半年後でも探しやすく、再利用や上書きがしやすいか」を確認してみてください。

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