吉本式BEM設計(BEM設計ベース)

美しいコーディングをするためのガイドラインコンテンツです。

クラス名の固定化 : クラス名(クラス設計)ルール

コーディングの経験を多く積んでいくと、あることに気づきます。

「このクラス名、いつも出てくるなぁ」と。

いつも出てくるということは、既にクラス名が固定化されているということです。
では、固定化されていない他のクラス名は、なぜ固定化できていないのでしょうか。

クラス名の固定化ができれば、ソースコードが美しくなります。

また、コーディング作業をしていく中で「この要素のクラス名、どうしようかな」と迷うことはないでしょうか。

クラス名の設定に迷いがなくなれば、コーディングスピードが大きく改善されます。

クラス名の固定化は、吉本式BEM設計(BEM設計ベース)の中で最も大事な要素の1つです。
これができれば、ソースコードが美しくなり、コーディングスピードも上がります。
本記事は、クラス名の固定化をテーマに、解説していきたいと思います。

Blockのクラス名

少し余談になりますが、次のソースコードを見てみます。

<div class="header">
	<div class="header__inner">
		<header class="header__main">
		</header>
	</div>
</div>

上のソースコードは実際に公開されているWebサイトのソースコードを抜粋していますが、このソースコードをみて、違和感を感じないでしょうか。
div要素のクラス名にheaderが設定されており、header要素にはheader__mainが設定されている。
header要素に設定するクラス名は、headerにしたほうが自然ではないでしょうか。

<header class="header">
<div class="header-inner">
<div class="header-main">
</div>
</div>
</header>

いかがでしょうか。
何が言いたいかというと「header要素のクラス名はheaderで固定しませんか」ということ。

ただし、ページの中に出てくるheader要素は1つとは限りません。
サイトのヘッダー以外に、コンテンツ内にもヘッダーが必要になる場合があります。
サイトヘッダーのheader要素のクラス名は、先ほど決めたheaderで良いでしょう。
コンテンツヘッダーのクラス名も固定してしまいましょう。
私は、コンテンツヘッダーのクラス名はchと決めています。

このように、サイト内に必ずと言ってもいいほど出てくるBlockのクラス名は固定しましょう。
私は、次のようにクラス名を固定しています。

<header class="header"> //サイトヘッダー
<footer class="footer"> //サイトフッター
<nav class="gnav"> //グローバルナビ
<main class="main"> //メインコンテンツ
<header class="ch"> //コンテンツヘッダー
<footer class="cf"> //コンテンツフッター
<nav class="snav"> //サイドナビ
<nav class="fnav"> //フッターナビ
<nav class="share"> //シェアナビ
<nav class="paging"> //ページング
<section class="sec"> //セクション

上のBlockは、頻繁に出てくる大枠のアウトライン要素ですが、もちろんBlockはもう少し細かい単位で出てきます。
Elementがある程度集まって1つの固まりになっていれば、それはBlockで囲むべきです。
この辺については、別の記事で解説したいと思います。

Elementのクラス名

先ほどのBlockと同様に、Elementに関してもクラス名を固定します。
Elementは、要素(タグ)に依存するようなクラス名を設定するので、基本的には全て固定になります。

例えば、h2要素にクラスを設定する際、皆さんはどのようなクラス名を設定するでしょうか。
いくつか公開されているWebサイトのソースコードを見てみました。

<div id="cate_title">
	<h2 class="gourmets">タイトル</h2>
</div>

div要素に「_title」と設定してしまうのは、違和感があります。「_title」と設定するのは、やはり見出し要素であるh要素が自然ではないでしょうか。
こういうケースが意外と多いようです。

<h2 class="ctitle">タイトル</h2>

cがなんの略かはわかりませんが、c + titleということなのでしょう。

<h2 class="c-item-title-whitespace">タイトル</h2>

クラス名が長い!けど、titleは含まれている。

<h2 class="modal_section_ttl">タイトル</h2>

ttlがtitleの省略形ですね。

と、いくつか見てみましたが、何が言いたいかというと、最初のdiv要素にtitleを含めたクラス名の設定をしてしまうのでNGですが、それ以外の例を見ると、h2要素には必ずtitleもしくはttlのようなタイトルを示す単語が使用されています。
h2要素は、見出しを意味するマークアップですので、タイトルを指すクラス名で固定してしまっていいのではないでしょうか。
私は、titで固定しています。
もちろんBEM設計ですので、titの前にBlock名がきます。

<h2 class="block-tit">

このクラス名で、私は固定しています。※block部分はBlock名ですので可変です。
同様に他の要素も決めることができます。
簡単な例として、table要素はわかりやすいです。
table要素は、もちろんテーブル(表組み)で使用しますので、tableをクラス名(Element名)で固定しましょう。

<table class="block-table">

ol要素やul要素は、リストを意味するマークアップですので、listでクラス名(Element名)を固定できます。

<ol class="block-list">
<ul class="block-list">

li要素は、リストアイテムを意味するマークアップですので、itemでクラス名(Element名)を固定できます。

<li class="block-item">

このように、クラス名(Element名)を固定することで、クラス名で悩むことはなくなります。
これは、コーディング速度を上げるための要因に大きく貢献します。

ただし、複数クラス名(Element名)が必要になる要素も出てきます。
それが、p要素とdiv要素です。

まず、p要素に関してですが、p要素に入る値にはどんな値が入るか考えてみましょう。
まず最初に頭に浮かぶのは、テキストでしょう。

<p>おはようございます。</p>

こんな感じで使いますよね。
これでまず1パターン目(テキスト系)です。

続けて、次のような使い方も出てきます。

<p>タイトル</p>

「p要素にタイトル?」と思われたかもしれませんが、こういう使い方あります。
例えば、次のようなソースコード、たまに見かけます。

<footer class="footer">
<h2>フッターにあるタイトル</h2>
</footer>

footer要素の中に、h要素?
やってはいけないマークアップです。
h要素は、コンテンツ内にのみに存在すべきだからです。
ですので、先ほどのソースコードは、次のようになります。

<footer class="footer">
<p>フッターにあるタイトル</p>
</footer>

これで2パターン目(タイトル系)です。
続けて、リンクテキストが入っているケースもあります。

<p><a href="#">リンクテキスト</a></p>

デザイン上、このリンクテキストがボタンのような形状をしている場合もあります。
これで3パターン目(ボタン系)です。

続けて、企業などのロゴを配置した場合です。

<header class="header">
<h1><img src="ロゴ"></h1>
</header>

ロゴを配置する場合、h1要素で囲んでいるのをよく見ますが、私はh1要素はNGとしています。
ロゴは見出しでしょうか。
また、h1要素で囲むほどSEO的に重要な要素でしょうか。

<header class="header">
<p><img src="ロゴ"></p>
</header>

私は、ロゴ系の画像はp要素で囲みます。
これで4パターン目(ロゴ系)です。

次で、最後です。
<p><input></p>

input要素です。
これで5パターン目(input系)です。

これが経験上、p要素に入ってくる値です。
これらの値以外に、何か入ってくる場合は、その値が本当にp要素で囲むべき値なのかを見直してみてください。

ということで、p要素に入ってくる値は全部で、5パターンですので、これらにクラス名(Element名)を固定します。

Element名ルール 1
p要素のクラス名(Element名)は、5つで固定する。
<p class="block-txt"> //テキスト系
<p class="block-tit"> //タイトル系
<p class="block-btn"> //ボタン系
<p class="block-logo"> //ロゴ系
<p class="block-data"> //input系

p要素に関しては、上の5つのいずれかのクラス名(Element名)で固定です、それ以外のクラス名(Element名)は出てきません。

続いて、div要素ですが、この要素に関しては、クラス名(Element名)を固定することが難しいです。
理由は、div要素は意味を持たないマークアップですので、いろんな使い方が考えられます。
ただし、私の経験上、次の4つのいずれかである程度の固定できます。

<div class="block-inner">
<div class="block-outer">
<div class="block-wrap">
<div class="block-box">

p要素・div要素について解説しましたが、そのほかの要素については、前に述べた通りクラス名(Element名)は1つで固定です。

Element名ルール 2
p要素・div要素以外のエレメントのクラス名(Element名)は、1つで固定する。
<h1〜h6 class="block-tit">
<table class="block-table">
<th class="block-ttit">
<td class="block-tdata">
<ul class="block-list">
<ol class="block-list">
<li class="block-item">
<dl class="block-def">
<dt class="block-dtit">
<dd class="block-data">
<form class="block-form">
<figure class="block-pic">

私は、上のようなクラス名(Element名)で固定しています。

ここまでの解説を読んで、次のような疑問を持つかもしれません。

クラス名(Element名)を1つで固定してしまったら、同じブロック内で、装飾の異なる要素(タグ)が複数出てきた場合は、CSSどうするの?

これはよくあるケースです。
例えば、次のようなソースコードになります。

<section class="sec">
<ul class="sec-list">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
<ul class="sec-list">
<li>画像</li>
<li>画像</li>
<li>画像</li>
</ul>
<ul class="sec-list">
<li>ボタン</li>
<li>ボタン</li>
<li>ボタン</li>
</ul>
</section>

ul要素のクラス名(Element名)は、listで固定すると決めています。
ul要素の親要素にあたるBlockには、secというBlock名が設定されているので、3つのul要素のクラス名は、自動的にsec-listとなります。
ただ、ul要素の装飾がそれぞれ異なります。

ここで必要になるのが、Modifierです。

Modifierのクラス名

モディファイア(Modifier)とは、以前の記事でも解説した通り、ブロック、エレメントの状態や装飾(レイアウト)のバリエーションを持たせるためのパターンを設定するために使用します。
上で出てきたケースがまさにModifierを使用するケースになります。
3つの装飾が異なるul要素にそれぞれModifierを設定します。

<section class="sec">
<ul class="sec-list _list">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
<ul class="sec-list _pics">
<li>画像</li>
<li>画像</li>
<li>画像</li>
</ul>
<ul class="sec-list _links">
<li>ボタン</li>
<li>ボタン</li>
<li>ボタン</li>
</ul>
</section>

Modifierの命名規則は、以前の記事で次のように決めました。
_ + Modifier名
この命名規則でそれぞれ_list、_pics、_linksとModifierを設定しました。
このクラス名(Modifier名)にCSSを設定することで、同じクラス名(Element名)のul要素に対し、異なる装飾をすることができます。

Modifierのクラス名については、特にルールは決めていませんが、Modifierが頻繁に必要になることは経験上そこまで多くありません。

具体的なクラス名の解説については、以上になりますが、実際にCSSをどのような指定で設定していくかは、今後の記事で詳しく解説していきます。