ProgrammingHTML/CSSスタイルガイド
スタイルガイド

CSSアーキテクチャ（前編）

CSSアーキテクチャとは

CSSは仕様がシンプルなため容易に習得できますが、大規模サイトやチームでコーディングする際や、長期的な保守などでは仕様以外の多くの知識が求められます。CSSの仕様を隅々まで理解し、メディアクエリやCSSアニメーションなどを使いこなせるとしても、それでCSSのスキルが高いとは言えません。

CSSの仕様通りに設計できることはゴールではなく、基礎能力にあたります。コードの可読性や保守性を保てるか、チームビルディングが可能かなど、別の側面が非常に重要です。CSSにはこれらの仕様以外の規則を提供してくれるアーキテクチャがいくつも用意されています。

この章では、まずCSSアーキテクチャとはどのようなものかという説明をします。後編では、よく利用されているCSSアーキテクチャの紹介していきます。

設計手法のメリット

CSSアーキテクチャで有名な記事では、CSS設計で重要な4つの目的を挙げています。

  • 予測性
    何のためのクラスかが明瞭
  • 再利用性
    既存のスタイルが簡単に再利用できる。既存スタイルを使って容易に新しいスタイルが作れる。
  • 保守性
    スタイルの追加、変更、削除といったメンテナンス性に優れている
  • スケーラブル
    大規模なWebサイトでも影響範囲が明確で、一貫性を保ちやすい。チームコーディングに適している

CSSを効率よく運用する手法として、多くのCSSアーキテクチャ（設計手法）が考案されました。CSSアーキテクチャにはBEMに始まり、OOCSS、SMACSS、FLOCSS、RSCSSなど多数あります。どれも一長一短なので、自分、チーム、もしくはプロジェクトに合う手法を選択すると良いでしょう。
各設計手法それぞれに特徴や強み・弱みがあるので、よく比較した上でどのアーキテクチャにするか決めると良いでしょう。前編では設計手法を選ぶための知識として、主に表記規則について説明していきます。

クラス名の表記規則

プログラム言語の変数や関数は、通常は宣言時に任意の名前を設定します。宣言した名前はあとで呼び出されることになるので、何の変数なのか名前から推測できることが重要です。かといって、説明文のように長くなってしまうとコード全体が読みにくくなってしまいます。

CSSでもクラス名の命名は重要です。特にページ数が多かったり、複数人での開発の際はクラス名をどう管理するかで開発速度や再利用性、保守性などに影響します。

命名規則のうち、最低限押さえておきたいのは大文字、小文字、単語の連結方法などの命名ルールです。有名なところではスネークケース、キャメルケースなどがあります。

スネークケース

スネークケースは文字は全て小文字、単語と単語の間はアンダースコア （_）で結合します。名前の由来はヘビのように見えるところからきているようです。

snake_case

変数名やドット表記法などにハイフンが使えないプログラムの場合によく使われます。

余談ですが、アンダースコア以外にもアンダーライン、アンダーバーと呼ばれることもあります。アンダースコアは空白に下線を引いた記号文字で、スネークケースの用途に合う呼び方ですが、アンダーラインは、文章の一部を強調する目的で文字の直下に引く線、アンダーバーは和製英語です。間違いではないかもしれませんが、アンダースコアと呼ぶ方が適切でしょう。

ケバブケース（チェインケース）

スネークケースと同じく文字は全て小文字で、単語間をアンダースコア（_）ではなくハイフン（-）で結合します。

kebab-case

名前の由来は単語を串刺しにしているように見えることからと思われます。

ハイフンは単語を結合、もしくは単語の途中で改行する場合にハイフネーションとして使われる記号です。意味を考えると、変数名を結合するのに最適な記号と言えます。

キャメルケース

キャメルケース（別名ローワーキャメルケース）は2つ目以降の単語の先頭を大文字にします。全ての単語の先頭を大文字にする場合はパスカルケース、もしくはアッパーキャメルケースとも言います。

camelCase

単語の区切りの大文字がラクダのコブのように見えることから名づけられました。

コンスタントケース

コンスタンスケースは単語全て大文字で、単語の結合にはアンダースコアを使用します。

CONSTANT_CASE

スネークケース、ケバブケース、キャメルケースなどと違い、コンスタントケースは変数全般で使われるということはあまりなく、主に定数やグローバル変数などに使われます。一般的な変数と区別したいときにコンスタントケースが使われます。

命名規則一覧表
名称表記例説明
スネークケースsnake_case単語をアンダースコアで結合します。
ケバブケース（チェインケース）kebab-case単語をハイフンで結合します。
キャメルケースcamelCase単語の先頭を大文字にする命名規則です。
先頭の単語だけ小文字にするのがローワーキャメルケースと呼ばれます。
全ての単語の先頭を大文字にする命名規則はパスカルケース、もしくはアッパーキャメルケースとも言います。
コンスタントケースCONSTANT_CASE単語を全て大文字記述する命名規約です。
単語をつなげる場合はアンダースコアを使用します。
一般的に定数やグローバル変数などに使われます。

スネークケース、ケバブケース、キャメルケースについてはどの表記法が正解ということはなく、言語やツール、環境によって最適と思われるものを選択してください。

クラス名のハイフン、アンダースコア紛争

CSSのクラス名で単語を結合する際、ハイフン（-）かアンダースコア（_）どちらを使うのが良いか悩ましいところです。ハイフンとアンダースコアの選択に正解はありませんが、メリットデメリットで比較してみました。

メリット・デメリット

入力のしやすさ：ハイフン

入力のしやすさであればハイフンに軍配があがります。QWERTY配列のローマ字入力の場合、ハイフンは小指1本で入力できますが、アンダースコアはアンダースコアのキーと同時にシフトキーも押す必要があります。

記号の意味：ハイフン

英文で、単語の結合や、単語が二行にまたがる際などに使われる記号はハイフンです。単語の結合を考えたとき、どちらが適切かといえばハイフンと言えます。

Google：ハイフン

Googleのスタイルガイドでは、IDやクラス名の別々の単語はハイフンで結合することが推奨されています。多くのJavaScriptでもクラス名はハイフン前提が多いです。

※Googleがハイフンを推奨しているのはガイドラインで、SEOでの推奨ではありません。

一貫性：アンダースコア

JavaScriptから要素にアクセスする際、ハイフン付きのIDやクラス名はキャメルケースに変換する必要があります。アンダースコアはJavaScriptの変数としてもそのまま使えるので、一貫性ではアンダースコアです。

※JavaScriptではクラス名を使わず、data属性を使うことでこの問題を回避することが可能です。

名前選択のしやすさ：アンダースコア

ハイフンの場合、クラス名をダブルクリックすると、ハイフンで区切られたところまでしか選択されません。アンダースコアの場合、アンダースコア含め1つの単語として選択されます。
※ツールによりますが、ほとんどのツールでは上記の通りです。

推奨：ハイフン

Googleがハイフンを推奨しているのは判断ポイントとしては大きいと思います。ハイフンのデメリットとしてJavaScriptからの呼び出しがありますが、data属性を使うようにすれば回避できます。

シングルクラス・マルチクラス

要素のクラス名は複数設定することができますが、1つの要素に対して1つから1つ程度のクラスを指定するのをシングルクラス、複数のクラスを指定するのとマルチクラスと呼びます。

マルチクラスの例

<div class="btn-group">
	<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>

シングルクラスの例

<div class="btn-group">
	<button type="button" class="btn-edit">Edit</button>
</div>

マルチクラス

マルチクラスは、1つの要素に対して複数のクラスを指定します。極端に言えば、色を指定するクラス、余白を指定するクラスなどを細かく用意し、必要なクラスを設定していきます。役割毎にクラスを分けるので、シングルクラスと比べるとルールセットの再利用性が高く、1つ1つのクラスの意味が明確になります。

装飾やレイアウトで機能を分割することから、テンプレート化にむいています。

Bootstrapを筆頭に、これから紹介するほとんどの設計手法もマルチクラスを採用しています。マルチクラスは利点が多いですが、問題点がないわけではありません。

まず、その性質から必然的にクラス数が多くなります。また、クラス一つでは成立しないので、一緒に使うクラスのセットを把握している必要もあります。複数のクラスを指定していくと、共通するプロパティが上書きされることも増えていき、優先度の問題などが発生します。

シングルクラスと比較すると、ランニングコストが高く、設計・利用時の複雑さも増します。

シングルクラス

シングルクラスは、1つの要素に対して1つから2つ程度のクラスを指定します。設計手法の中ではBEMがシングルクラスとの親和性が高いです。マルチクラスと比べるとスタイルの適用範囲がわかりやすく、カスタマイズしやすい傾向になります。

問題点としては、マルチクラスと比べると再利用性は低く、1つ1つのクラスの意味が不明確になります。さらにSassが一般的でなく、ブラウザ上でCSSを特定するような機能に乏しい時代では、シングルクラスだとコード量が増え、マルチクラスよりも欠点が多かったと思います。

現在ではSassの@extendや@mixinでシングルクラスの欠点を補えるようになりました。

メリットとデメリット

  • 設計、カスタマイズの容易さ：シングルクラス
  • スタイルの適用範囲のわかりやすさ：シングルクラス
  • CSSのコード量を押さえる：マルチクラス
  • 再利用性の高さ：マルチクラス
  • テンプレート化：マルチクラス

マルチクラスとシングルクラスはどちらが優れているということではなく、状況により優位が変わります。たとえば、マルチクラスは設計時のコストが高いので、LPや小規模なサイトであればシングルクラスの方がむいています。ただし、マルチクラスはテンプレート化しやすく、テンプレートを使う前提であれば、1枚のLPであってもマルチクラスの方が優位な場合もあります。

メモ

CSSアーキテクチャは程度の差こそありますが、うまく取り入れることでどれも保守性や再利用性を高めてくれます。一般的に再利用性は重要ですが、状況によっては再利用性を制限するのも効果的な場合があります。Webでは新しい技術が次々と生まれ、デザインも数年で古くなり、リニューアルの際はコードも全て書き換えるのが一般的です。また、ほとんどの運用でコンテンツの追加が頻繁にあったとしても、スタイルの変更はほぼありません。一度リリースしたあと、デザインを変更する機会はあまりないと言ってよいでしょう。また、LPのような数枚ページだけの制作の場合、ほとんどの設計手法は重すぎで、採用した恩恵はかなり限定的です。

CSSアーキテクチャをプロジェクトによって使い分けるというのも難しいですが、どのようなケースも最適に解決するアーキテクチャは無いように思います。CSS自体のさらなる進化に期待です。

関連記事