ここだけコンセプト説明が手薄なので補ってみる
出典
Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというようにすることもできます。 - hiloki/flocss: CSS organization methodology.
SMACSSのStateパターンとは
SMACSSでは 状態（ステート） という形でレイアウトの状態を持つカテゴリとして定義している。
SMACSSの和訳ガイドには以下のようにある
状態とはほかのすべてのスタイルを拡張し上書きするものである。 例えばアコーディオンセクションは畳まれているか広がっている状 態にある。メッセージは成功かエラーの状態にある。
このようにアコーディオンを例に説明している、さらに続いて以下のような記述がある。
サブモジュールスタイルと状態スタイルには非常に多くの類似点が 見られる。双方とも現存する要素の見た目を変更するが、両者は大 きな2点が異なっている:
1. 状態スタイルはレイアウトやモジュールに割り当てること ができ
2. 状態スタイルはJavaScriptに依存するという意味を持つ
2つ目のポイントが最も大切な区別のポイントとなる。サブモジュー ルスタイルは要素に対してレンダリングのタイミングでスタイルを 付与して以降変更されることはない。
上記にあるように「レンダリング時点では決定できるものはサブモジュール」であり、そうではないもので使うのが良いという解説になっている。
is-*サフィックスを使う考え方
FLOCSSのドキュメントにも記述されているが
- JavaScriptなど、ページ上のアクションで状態が変化するものに定義するのがよい
- レンダリング時点で状態が決まるものは違う表現（のほうがよさそう）
