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

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

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

§1 SMACSSについて

本プロジェクトは”SMACSS”の手法でHTML,CSSコーディングを行う。
SMACSSでは、styleを以下のカテゴリに分けて記述する。

1.Base カテゴリ
2.Layout カテゴリ
3.Module カテゴリ
4.State カテゴリ
5.Theme カテゴリ
6.Tools カテゴリ

1.Base

本プロジェクトにおける、各要素のデフォルトのスタイルを定義する。
sass/base/_bases.scss —-> 各要素のデフォルトスタイル
sass/base/_var.scss ——> sassの変数を定義

2.Layout

header,footerなど大枠のレイアウトのスタイルを定義する。
Layoutカテゴリに属するセレクタには、必ず先頭に”l-“を付与する。
sass/layout/_all.scss —-> 各要素のデフォルトスタイル

例）これらは_all.scssに記述する
.l-wrapper
.l-header
.l-side
.l-footer

3.Module

ページを構成するほとんどの要素がこのカテゴリに属する。
再利用可能なモジュールと、そうでないモジュールの両方が該当する。
セレクタの先頭に”m-“を付与する方法もあるが、groowebルールでは省略する。
モジュールの数は当然多くなる。
1モジュールごと もしくは 同系統のモジュールをまとめて1つのscssファイルで定義する。

例）
.text-box,
.text-photo-box
これらを、 sass/module/text-box.scss　で定義

.menu-list-2cols
.menu-list-3cols
これらを、 sass/module/menu-list.scss　で定義

.footer-link
.copyright
これらを、 sass/module/footer.scss　で定義

＊ scssファイルの分け方は あまり難しく考えずに、別のコーダーが容易に理解でき、推測できればOK

4.State

例えばJavaScriptによる制御によって切り替わるような、状態を表すルールが該当する。
Stateカテゴリに属するセレクタには、必ず先頭に”is-“を付与する。

例）
JavaScriptでフォントサイズの大中小を切り替える際のフォントサイズの定義
.is-large-font
.is-small-font

5.Theme

今回のプロジェクトでは使用しない。

6.Tools

grooweb独自のツール系styleが属するカテゴリ。
* sass/tools/_reset.scss ——> 編集NG
* sass/tools/_mixins.scss —–> 必要に応じて追記OK
* sass/tools/_helpers.scss —-> 必要に応じて追記OK

§2 BEMについて

HTMLの各要素に付与するclass値の命名ルール。
Block / Element / Modifier の頭文字を取っている。

Block —–> 構成のルートとなる要素
Element —> Blockの子要素（構成要素）
Modifier –> BlockまたはElementから変化した状態を表す

groowebでのBEM記法

.block
.block__element
.block__element–modifier
.block–modifier
.block–modifier__element
＊elementの前にはアンダーバー2個、modifireの前にはハイフン2個

HTMLで書くと以下のようになる：

実際の例：

GROOWEB SCSS SMACSS BEM ガイドライン（後編）