SCSSのファイル設計（クラス名の命名規則と要素について vol.2）

前回の記事では、Layout要素、Component要素、Project要素、そしてElement要素について解説しました。
今回はこれらの要素に紐づく、Modifierについてから解説していきます。

Modifierについて

Modifierとは、Block要素・Element要素にバリエーションを持たせるために使用するクラス設定です。
基本的には同じ構成だけど、色が違う、サイズが違う・・・などの見栄えが少し異なる場合や、現在地を表したり、アコーディオンコンテンツのような展開してるしていないなどの状態を設定する場合などに多く使用されます。
BEM設計の考え方で用いられたものですが、FLOCSS設計でもBEM設計の規則を採用しているため、Modifierが使われます。
Modifierのクラス名の命名規則について考えてみます。

html

<ul class="list">
	<li class="list__item">リストアイテムテキスト</li>
	<li class="list__item list__item_state_current">リストアイテムテキスト</li>
</ul>

上のようなクラス名は、BEM設計のModifierの命名規則です。

html

<ul class="list">
	<li class="list__item">リストアイテムテキスト</li>
	<li class="list__item is-current">リストアイテムテキスト</li>
</ul>

FLOCSS設計では、SMACSSのStateパターンの命名も採用しているため、is-*プレフィックスを付与した方法でも良いとされています。
SMACSSのStateパターンだと、上のようなこんな感じでしょうか。（私自身、SMACSSについてはあまり知識がありません。）

BEM設計のModifierの命名規則だと、どうしてもクラス名が長くなってしまいます。
（クラス名が長くても気にならないという方は、このままで問題ないと思います。）

クラス名を極力短くする方針の吉本式は、次のような命名規則とします。

html

<ul class="list">
	<li class="list_item">リストアイテムテキスト</li>
	<li class="list_item _current">リストアイテムテキスト</li>
</ul>

Modifierのクラス名の命名規則ルール

'_' + Modifier名

頭文字にアンスコ（_）を付与します。
もちろんBEM設計と同様に、Modifier単独でスタイルを設定することも禁止します。
必ず、Block要素（Layout要素、Component要素、Project要素）またはElement要素に依存するような記述の方法でModifierにスタイルを設定します。

scss

._active {
	color: #f00;
}

上の記述だと、Modifier単独での記述になるため禁止です。

scss

.list{
	&_item{
		&._active {
			color: #f00;
		}
	}
}

上のような記述で、必ず要素に紐づけた記述で書くことをルールとします。
以上が、Modifierについてのクラス名の命名規則についてです。

要素には必ずクラス設定が必要かどうか

BEM設計やFLOCSS設計を採用すると、基本的に全ての要素にクラス設定が必要になります。
全ての要素にクラスを設定することは、正しい考え方ですが、実務的にはどうでしょうか。
全ての要素にクラスを設定する・・・というのは、意外と大変な作業です。
おそらくBEM設計を採用して実装を進めていくうちに「この要素には、クラス名を設定しなくていいかな・・・」という考えになってしまうのが現実かと思います。
これはBEM設計・FLOCSS設計を採用しているという面からはルールに反しているためよくありませんが、実務的には仕方のないことかもしれません。
現に、BEM設計・FLOCSS設計を採用しつつ、全ての要素にクラスを設定しているWebサイトがどのくらいあるかというと・・・、少ないイメージです。

であれば、最初からルールとして、クラス名を設定しなくてはいけない要素、しなくてもよい要素を区別しておくことで「迷い」がなくなり、効率的に実装ができると思います。

クラス設定ルール 1

Layout要素、Project要素には必ずクラス設定をする。

Layout要素、Project要素になりうるタグ要素は限定的ですので、必ずクラス設定をするたぐ要素は次の要素になります。

header, footer, main, section, article, nav, aside, form, div

上の要素には必ずクラス設定をするというのがルールになります。
div以外の要素は必ずLayout要素かProject要素のどちらかになりますので、クラス名はBlock名になります。

そのほかに、必ずクラス設定が必要な要素は、次の要素とします。

h(x), p, table, ul, ol, li, dl, dt, dd, figure

いわゆる、ブロック要素と呼ばれていた要素です。
HTML5からブロック要素とインライン要素の定義がなくなりましたので、上の要素をブロック要素と考えてください。

クラス設定ルール 2

ブロック要素には必ずクラス設定をする。

残りのいわゆる、インライン要素と呼ばれる要素に関しては「基本的にはクラス設定はしないが、必要であればクラス設定をする」というルールを設けます。
ここが「迷い」のポイントになってしまうと考えられてしまいますが「基本的にはクラス設定はしない」という基準を設けることで「迷い」ではなく「順序」という流れができます。
実装に慣れてくると、クラス設定が必要がどうかを判断しながらマークアップをしていくことになると思いますが、それまでは少し慣れが必要かもしれません。

クラス設定ルール 3

インライン要素は、基本的にはクラス設定をしないが、必要な場合はクラス設定をする。

インライン要素という定義に関しても、HTML5から定義されなくなりましたので、次のような要素と考えてください。

a, img, button, input, label, select, textarea, span, video, picture, time, br, 装飾要素（strong, em, iなど）

上のような要素をインライン要素と考えください。

html

<ul class="list">
	<li class="list__item">
		<a href="#" class="list__item-link">
			<span class="list__item-icon"><img src="icon.png" class="list_item-img"></span>
		</a>
	</li>
</ul>

上はBEM設計でマークアップした例ですが、吉本式でマークアップすると、次のようになります。

html

<ul class="list">
	<li class="list_item">
		<a href="#" class="link">
			<span><img src="icon.png"></span>
		</a>
	</li>
</ul>

a要素は、Component要素と仮定してクラス設定しています。
もちろん、span要素やimg要素にクラスが必要な場合は設定します。
以上が、クラス名の命名規則とクラス設定が必要な要素の区別についてでした。

最後に先ほど「全ての要素にクラスを設定することは、正しい考え方」と述べたことについて補足しておきます。
CSSのセレクタは右から左へと解釈していきます。
例えば、次のようなスタイル設定があったとします。

css

.header img{
	width: 100px;
}

上のCSSセレクタの解釈は、まずはimg要素を探し、その親要素にheaderクラスがある要素を探す。
という順になります。
img要素のようにタグを指定してしまうと、ページ全体からimg要素を参照することになり、処理が遅くなります。
そのため、タグ指定を避け、クラス設定をすることで、参照する要素を絞ったほうが処理の高速化に繋がる。
というのが、仕様になりますが、個人的な意見としては、果たして処理速度にどのくらいの差が出るのか・・・というのが疑問です。
ストレスを感じるレベルで差が出てしまうのであれば、タグ要素の指定は避けた方が良いでしょう。
ただ、実務的に問題ないのでは・・・というのが現状の個人的な意見です。
そのため、仕様的にはタグ要素の指定は避けた方が良いかもしれませんが、許容しています。

次回は、SCSS設計からComponent要素とElement要素についての考え方をまとめてみます。