Modifierモディファイア
「Modifier」（モディファイア）は、修飾用のclassです。任意の要素に付与することで機能を拡張します。
記法や用途に制限はなく、制作者の動機により自由に使用できます。
Modifier（モディファイア）は、修飾を動機としたclass
「Modifier」（モディファイア）は、既存の要素やスタイルに対し、後付けの修飾や拡張を動機としたclassです。
使用目的は複数ありますが、部品表示の主たるものではなく、後付けしようとする動機のもの全般を「Modifier」と呼びます。
- is-active
- is-open
- text-lg-left
- disable
- readonly
- u-clearfix
- align-middle
- use-overlay
- btn-large
- btn-small
- js-target
記法や付与個数などは自由
「Modifier」に共通していることは、それがシングルクラスかマルチクラスかに関わらず、後付けによって何らかの固定の表示変化をもたらしたり、機能利用のためのフックを加えようとしていることです。
こういった動機を持つすべてのものが「Modifier」であり、記法に特定のルールや制限はありません。
故に、「Roots--Element-Modify」のルールを踏襲することもでき、同じ理由で「Roots」を持つことも可能です。
Use Case
6つの動機による利用イメージ
「Modifier」を利用する6つの動機の利用イメージです。
A状態変化をclassで示し、それに伴うスタイリングをおこないたい
対象とする要素に、JavaScriptなどによって状態を表すclassを付与し、それによって表示を変更したい場合です。
以下は、.menuに対して.closeというclassを追加することによって、内部の.menu--bodyをCSSやJavaScriptによってスライドアップもしくは非表示にしているような例です。
以下は、.closeという汎用的な単語の代わりにSMACSSのis-を利用し、.is-closeというclassを追加した例です。
isそのものを「状態変化を示すための文字列」として「Roots」であると自ら定義すれば、is.scssで簡易の単語説明を作成できます。
以下は、「Roots」に強く関連付けられていると示すため、.is-closeを.menu--body-is_closeとした例です。
「Modifier」には記法のルールがないため、自由に単語や文字列を連結できます。
Bボタンなどの小さな部品をマルチクラスで完成させたい
「OOCSS」の概念のような、マルチクラスによって見出しなどの小さな部品を完成させて再利用するアプローチです。
以下は、.btnに.primaryという汎用的な単語をマルチクラスで与えた例です。
.primaryは「Roots」に強く関連付けられたModifierとして、.btnのSassファイルで管理します。
以下は.primaryを.btnの変化版・バリエーションであると明示するために、.btn-primaryとしています。
.btn-primaryは、それだけ見れば変化版を示す記法(Modify)ですが、「Modifier」では記法ルールは存在しないため、意味を保持したまま修飾用に使用できます。
C大きな部品を異なる場所で再利用したときに、一部の表示を変更したい
大きな部品を別の場所に再利用するときに、その場所やコンテキストに適合するよう一部のスタイルを上書きしたい場合です。
以下は特定範囲のコンテンツページを案内するローカルナビゲーションを、別の場所でそのまま再利用し、マルチクラスでスタイルを上書きしているような例です。
上記のコードから、「デザインはほとんど同じだが、サイドメニューに配置したときだけ、余白やフォントサイズのみを調整したいのかもしれない」と予測できます。
D規模の小さな効果や色などのスタイル変化をダイレクトに付与したい
色や大きさ、余白などの固定の効果を持たせたclassを、対象となる要素に付与してダイレクトに変更するアプローチです。
以下は、.textに対して.mt-smというclassを与えることで、CSSのmargin-topを「sm（スモール）」サイズで適用している例です。
テキスト
以下は、.text-errorというclassを用いて、効果のみ（たとえばテキストを赤にする）を目的の対象に後付けで付与している例です。
テキスト
この例では、対象を赤に変えたいから個別にそのようにスタイリングするのではなく、赤にするためのCSSを先に書いて、後から対象を選んでいます。
上記の例では「結果的に」シングルクラスになっていますが、マルチクラスで付与しても同様です。
EJavaScriptのトリガーやターゲットとして付与したい
クリックやタップなどのトリガー指定や、それによって影響を受ける対象を指定したい場合です。
以下は、JavaScriptのトリガーであることを示すclassを.btnに付与し、複数の.cardをターゲットとするためのclassを与えた例です。
…
～
…
…
…
ボタンのクリック（タップ）によって、カードがの並び順が切り替わるようなものであると予測できます。
Fナビゲーションやコンテンツなどの識別子に使いたい
ナビゲーションのアクティブ表現や、コンテンツデータの識別に使用したい場合です。
以下は、bodyに与えられたディレクトリ識別子dir-productと、.gnavのリストアイテムに対して与えられたそれぞれの識別子を利用して、ナビゲーションのアクティブ表現をおこなっているような例です。
～
- …
- …
- …
- …
～
このときのCSSをどこに記述するかは設計次第となります。
dirを「Roots」と捉えるのか、gnavを「Roots」と捉えるのか、もしくは別のCSS設計手法による何らかのレギュレーションに準拠するのかは制作者の意図次第です。