この記事では、CSSのクラス名についてCSSフレームワークを参考に考える方法をお伝えします。
特に以下の3段階に分けて書いてみました。
- 何から始めていいのかわからない。→ STEP1
- クラスにバリエーションをつけるときの名称に迷う。→ STEP2
- 構造が複雑なときのクラス名の付け方がわからない。→ STEP3
お急ぎの方は、気になる部分だけ読んでみてください！
そもそも「CSSフレームワークって何？初めて聞いた。」な人は STEP0 から...。
STEP0．CSSフレームワークって何？
簡単に言うとCSSフレームワークとは、Webページを作る際に使える「素材集」です。
Webページ作成時によく使うパーツやレイアウトをまとめて提供しており、フレームワークを読み込めば、クラス名を指定するだけで統一感のある画面を作成することができます。
フレームワークによって特徴やデザインも様々異なります。検索するとまとめサイトもたくさん出てくるのでぜひ色々調べてみてください。
ここでは、比較的有名な以下3つのフレームワークを参考にしていきます。
(私が初めに教えてもらったから有名だと思っているだけかもしれない...)
- BootStrap：https://getbootstrap.com/docs/4.4/getting-started/introduction/
- BULMA：https://bulma.io/documentation/
- Foundation：https://get.foundation/sites/docs/
(上のリンクは各CSSフレームワークのDocumentationに繋がっています。Documantationは、CSSフレームワークの説明書と考えるとよいかと思います。)
STEP1．何から始めていいのかわからない
とりあえずHTMLは書いたけど、どんなクラス名がいいか分からないというあなた。
まず作りたいコンポーネント(部品)の一般的な名称を考えてみましょう。
そして、CSSフレームワーク内に同じようなコンポーネントがないか探してみましょう。
CSSフレームワークはより多くの人に使いやすいように設計されているものなので、そこで使われている名前を付けることで他の人が見たときにもわかりやすい名前になることが多いです。
BootStrapでは、画面端にナビゲーションと検索ボックスが存在します。
ここに探したいキーワードを入力してみます。例えば「ボタン」を作りたい場合...
butまで打つだけで候補が出てきますね！出された候補をぽちっと押してみましょう。
表示されるButtonsページでExamplesの一番上に出てくるものがこのコンポーネントの基本となります。
迷ったときは、このクラス名を参考にしてみてください。
ちなみにFoundationは同じような検索ボックスがありますが、BULMAはありません。
検索ボックスがないからと焦らず画面端のナビゲーションを開いてみてください。ElementsやComponentsの中にお探しのコンポーネントが見つかるかもしれません。
注意
調べて出てきたからそのまま名前を使う、だとよくないなと思う面もあります。
例えばボタンでもBootStrapだとbtnという略称が使われていますが、BULMAやFoundationだとbuttonという省略しない名称が使われています。これはコンポーネントごとにバラバラ...ではなくこのフレームワーク内で共通のルールがあるということ。色々なサイトを参考にバラバラにクラス名をつけていくと、自分の書くコード内のルールが統一されなくなってしまう可能性があるわけです。
自分のコード内でルールが統一できているか？も振り返りつつ、フレームワークを参考にしていきましょう。
(略称を使うか使わないか問題は、基本的には略称を使わない方が初めて見た人にも伝わりやすく親切です。)
STEP2．作ったクラスに変化をつけたいクラスにバリエーションをつけるときの名称に迷う
色を変える。サイズを変える。など、変化をつけたい場合の名称はどうすればよいのでしょう？
基本的にはバリエーションクラスと呼ばれるクラスを追加してこのような変化をつけていきます。
CSSフレームワークのドキュメントでは、コンポーネントの基本形の後にバリエーションの例が載っています。
buttonコンポーネントを参考に見ていきましょう。
//基本のクラス名
btn
//色のバリエーションクラス
btn-primary, btn-secondary, btn-success, btn-danger, ...
//サイズのバリエーションクラス
btn-lg, btn-sm
//状態のバリエーションクラス
active, disabled
//基本のクラス名
button
//色のバリエーションクラス
is-primary, is-secondary, is-success, is-danger, ...
//サイズのバリエーションクラス
is-learge, is-medium, is-normal, is-small
//状態のバリエーションクラス
is-active, is-hovered,...
//基本のクラス名
button
//色のバリエーションクラス
primary, secondary, success, alert, ...
//サイズのバリエーションクラス
large, small, tiny, ...
//状態のバリエーションクラス
disabled
BootStrapは、btn-XXという形でバリエーションクラスを記述しているようです。
ただし状態を表すときはactive, disabledのように状態名のみを記述していますね。
BULMAでは、色・サイズ・状態のどのバリエーションでもis-XXという形でバリエーションクラスを記述しています。
Foundationは上2つと異なり、-で文字をつながず1単語でバリエーションクラスが作られています。
どれが正解ということはありませんが、フレームワークごとにルールが違うのでコンポーネントごとにルールを混ぜないよう注意が必要です。
（BootStrapはbtnだけでなくサイズもlg, smと省略しているところを見ると、フレームワーク全体として略称を積極的に使っていくルールがありそうですね。）
STEP3．構造が複雑なときのクラス名の付け方がわからない
要素が組み合わさったコンポーネントの名前の付け方がわからない場合は、クラス名に構造を持たせるとよいでしょう。
さっそくですが、cardというコンポーネントを参考に見ていきましょう。
各フレームワークのcardの構造を簡単に並べてみました。
【BootStrap】
<div class="card">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"></p>
</div>
</div>
【BULMA】
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<div class="media"></div>
<div class="content"></div>
</div>
</div>
【Foundation】
<div class="card">
<div class="card-divider"></div>
<img>
<div class="card-section">
<h4></h4>
<p></p>
</div>
</div>
各コンポーネント共にcardという親クラスの中にcard-bodyやcard-contentなどのcard-XXの形のクラスがあるのがわかると思います。これをサブコンポーネントとも呼びます。
cardの中の要素をすべて並列にするのでなく、card-contentなどで役割を分けた中にさらに細かい要素（タイトル、テキスト、画像や他のコンポーネントなど）を入れることで、構造を分かりやすくしているのです。
おわりに
フロントエンドに触れ始めた当初、私自身がクラス名の付け方全く分からん...と思っていたので、CSSフレームワークを参考にするという手があるんだよ（ただし、ルールを統一して使いましょう。）という記事を書いてみました。
考え方の根本みたいな部分には触れられていない(説明できなかった...)ので後々調べていただきたいところですが、はじめの一歩か何かの参考になると嬉しいです！
ここまで読んでいただきありがとうございました！