ベースファイルのダウンロードはこちらから
https://github.com/YoheiNishi/grooweb-scss-smacss-bem

前編§1 SMACSSについて
前編§2 BEMについて

§3 セレクタ命名について
§4 scssファイル構成の実例
§5 class値定義の実例

§3 セレクタ命名について

class値(CSSセレクタ名)は、BEM記法で付与する。
基本的に単語は略さないが、略しても常識的に意味の捉え方に差異が生じない場合は略してもOK。

NG例:
container → cont ×
wrapper → wrap ×
heading → hd ×
center → c ×
clearfix → cf ×

OK例:
column → col ◯
text → txt ◯
image → img ◯

§4 scssファイル構成の実例

実案件の例として、下記のようなscssファイル構成となった。

style_scss_sample

§5 class値定義の実例

見出しとデータ/リンクリスト/a要素のclass省略

  • __head と __data を対にする
  • li要素を示す値は”__item”で統一する
  • 最小要素であるa要素はclass属性を省略(この場合は)

class_example_01

長くなってしまうclass値の省略

BEM記法にて class値に全ての親要素を含めると長くなりすぎてしまう場合、
要素の意味が特定できるなら 省略してもOK。
class_example_02