BEMを使ったSassファイルの整理

ブロック

scss/
├ _header.scss
└ header/
   ├ _logo.scss
   └ _site-navigation.scss

ファイル名がブロックになり、かつ繰り返しにならないようにディレクトリを使って配置する。CSSのクラス名で.header__site-navigationになるであろうルールセットが含まれるのがheader/_site-navigation.scssになる。必要なら必要なだけネストしていけば良い。例えば.header__site-navigationにナビゲーションのリスト以外に検索ボックスやRSSフィードを表示するブロックがあるなら以下のようにする。

scss/
├ _header.scss
└ header/
   ├ _logo.scss
   ├ _site-navigation.scss
   └ site-navigation/
      ├ _feed.scss
      ├ _list.scss
      └ _searchbox.scss

header/と_header.scssあるのはちょっと気持ち悪いし、ブロック単位での一括削除がしづらくなるので、header/_index.scssとかの方が良いのかもしれない。

エレメント

body > header nav {
  ul {
    display: inline-table;
  }

  li {
    display: table-cell;
  }
}

ルールセット内で1段階ネストするとエレメントになる。先述のようにブロックは必ずファイルになるので、&を使わないネストは必ずエレメントとすることができ、読みやすくなる。

ブロックが分散する前提なので、ブロックをまたいだエレメント間でのルールの共有が難しい。そのためプレースホルダー・クラス頼みになるので、見通しがちょっと悪くなる。

モディファイア

body > header nav {
  li {
    &.current {
      border-bottom: 3px double;
    }
  }
}

&を使ってネストさせるとモディファイアになる。ネストでモディファイアでも良さそうだけど、それだとブロックに対するモディファイアが、エレメントと同じになってしまうので混乱する。Sass (に限らないけど)のネストは深くするべきではないので、2段階のネストをモディファイアと確定させると、これ以上のネストがまず起こらないようになる。

出力されるセレクターに無駄が出るのと、&をSass本来の用途として使っていないところが良くない。