Sassの「&」を使うとBEMがとても書きやすくなる話

2018年9月26日

優れた命名方法である一方、どうしても長ったらしいクラス名になってしまう難点を持つBEM。
そんなBEMですが、Sassの「&」を使うことでBEMの長いクラス名を簡単に書くことができます。

ちょっと感動するくらい便利で今後積極的に使っていこうと思うのでメモ。
メモするまでもなく簡単なのだけれど。ちなみにscss記法です。

Sassの「&」の機能

Sassにおける「&」は、親セレクタを参照するセレクタとして機能します。
まずは、一つ例を示します。

.hoge {
  font-size: 16px;
  a {
    color: blue;
    &:hover {
      color: green;
    }
  }
}

上記のSassをコンパイルすると、次のようなCSSになります。

.hoge {
  font-size: 16px;
}
.hoge a {
  color: blue;
}
.hoge a:hover {
  color: green;
}

「&」を使用することで、親セレクタが参照され、:hover前が補完されます。

BEMとあわせて使用した場合

さて、ここからが本題。
BEMでは、Elementのクラス名はBlockのクラス名をつけて記述する、という決まりがあります。
例えば、 .hoge というBlockのElementには、 .hoge__huga というクラス名がつけられます。

Modifierの場合も同様で、BlockやElementに続けてModifierが付けられます。

次のようなCSSを書くとします。まずは「&」を使わずに書く場合。つまりコンパイル後のCSSですね。

.block {
  font-size: 16px;
}
.block__element {
  width: 300px;
}
.block__element2 {
  width: 150px;
}
.block__element2--modifier {
  background-color: #eee;
}

これを、Sassの「&」を使って記述すると以下のようになります。

.block {
  font-size: 16px;
  &__element {
    width: 300px;
  }
  &__element2 {
    width: 150px;
    &--modifier {
      background-color: #eee;
    }
  }
}

ずいぶんとすっきりした記述になります。block名やElement名は一度しか記述していません。
また、Block・Element・Modifierの分離がより視覚的にも捉えやすくなり、修正も容易になります。

実際のスタイルの記述は、上記の例よりも複雑なものになることがほとんどでしょう。クラス名が長く複雑になるほど、Sassは効力を発揮するはずです。
BEMの命名規則とSassの相性はとても良いといえるのではないでしょうか。

HTML側の長さはどうしようもないけど。。

SassSass, CSS, BEM

Posted by WebMemo