MD-Blog_Web Creative

随分と気温が上ってきましたね。
夏が近づくにつれ、自宅のリビングのエアコンが壊れていることを思い出し暗い気持ちになります。
いい加減買い換えないと人命に関わるかもしれません。

さて、今回は命名のお話しです。
恐らくHTMLやJSを書く人ならあるある話だと思うのですが、コードを書くよりクラス名を考えるほうが面倒に感じること、ありませんか？
業界的には色々と議論が尽くされているところでもありますが、結局明確な決まりはなく好みの問題もあるので、悩みも尽きないのです。

class命名の基本ルール

まずは「そんなの常識だろう」と言われそうな、基本的に気をつけるべきこと達からです。

わかりやすい英語ベースの名前を付ける

当たり前すぎますが、パッと見てその要素の性質がまったく想像できない名前はNG。
例えば少しずつ装飾の違う要素に.block-1、.block-2、...と数字を振っていくようなやり方だと、後から見た時に混乱します。
.block-noborder とか .block-red とか、それぞれの装飾の特徴が分かるような名前をつけるべき。
また、基本的には名前は英語で付けたほうが無難です。
『通常業務』についてのセクションに名前を付けようと思った時、 .tsujogyomu なのか .tsujyogyomu なのか .tsujo-gyomu なのかが分からないから嫌、というのが自分にとっての理由です。英語なら綴りが一意に決まりますから。

命名に統一感を

命名のというより設計思想の話ですが、似た性質を持つ要素には名前に何らかの繋がりを持たせたいところです。
例えばカード風のデザインが複数ページに存在していたら、どのような設計であれどちらのクラス名にも"card"という単語が登場したほうが自然です。
また、ハイフン"-"、アンダースコア"_"は別物なので、混在する場合は必ず扱いの違いを明確にしましょう。

デザイン変更を見越して命名する

• 左の要素に.foo-leftと命名してから、デザイン変更で.foo-rightと左右が入れ替わってしまった。
• 上の要素に.foo-alphaと命名してから、デザイン変更で.foo-betaの下に移動になってしまった。

これもまた、あるある。
後出しデザイン変更はやめて！と言いたくなるかもしれませんが、自分が楽をするために起こりそうなデザイン変更を見越した命名をしておくのも賢者の知恵です。
概要の要素には .foo-summary 、本文には .foo-content 、といったように要素の本質をざっくり表した命名をすれば、多少のデザイン変更には耐えられるHTMLになります。
サステナブルデザインというヤツです。

いろいろな命名パターン

基本を押さえたところで、最近のモダンな命名規則について調べてみたいと思います。
BEMが有名ですが、最近はBEMを拡張した規則もよく見かけます。
それぞれの規則について、メリット/デメリットも紹介していきます。

OOCSS (Object Oriented CSS)

いわゆるプログラミングにおけるオブジェクト指向をCSS設計でも活用しようよという考え方です。
それぞれの"要素"に名前を付けていくのではなく、まず"機能"や"性質"に名前を付けて、その要素が持っている"機能"や"性質"の分だけクラスを付けていきます。

例えばこちら、弊社トップサイトのSAKE NETWORKバナー要素。
OOCSSで命名するなら、

<div class="main">
<div class="panel bordered wide">

こんな感じでしょうか。

長所

• 名前を付ける対象が"機能"や"性質"なので、名前を考えるのが楽。
• 一つ一つのクラス名が短くなる。

短所

• 色々なクラスの組み合わせでスタイリングするので、CSSが複雑になる。
• 例外に弱い。ここはマージン10pxだけどこっちは5px、とか言われると困る。

BEM

おそらく最もメジャーなHTML/CSS命名規則。
「名は体を表す」とばかりに、一つのクラス名に出来る限りの情報を詰め込むのが特徴です。
__B=Block__、__E=Element__、__M=Modifier__の略で、これらをblock__element--modifierという形で接続したものがクラス名になります。
Elementは要素で、Blockはその要素のかたまり。Modifierは基本のスタイルから派生させる場合に追加します。

先程のバナーの例でいうと、

<div class="main">
<div class="main__panel--bordered--wide">

というような形になります。

長所

• 一つのクラス名でその要素の性質を表すことができる。
• 要素ごとにユニークな(あるいはそれに近い)名前を付けることになるので、CSSの構造はシンプルになる。
• SASSなどのプリプロセッサとの相性が良い。

短所

• クラス名が長く、醜い。
• SASSなどのプリプロセッサが導入されていないとCSSを書くのがつらい。
• SASSのmixinでB/E/Mを連結する造りをよく見るけれど、実際のクラス名で検索できなくなるのは不便だと思う。

SMACSS (Scalable and Modular Architecture for CSS)

OOCSSとBEMSの発展形ともいえますが、CMACSSでは5つの性質に分けて考えます。
__B=Base__、__L=Layout__、__M=Module__、__S=State(状態)__、__T=Theme__。Layoutに関しては"l-"などの接頭辞を付けることが推奨されています。
BEMSと異なるのは、SMACCSではクラスごとに上記の「いずれか一つ」の性質を持つというルールがあります。

先程のバナーの例でいうと、

<div class="l-main">
<div class="panel is-bordered is-wide">

となります。

長所

• クラスごとに一つの性質しか持たないので、各クラスの役割がわかりやすい。
• OOCSSのマルチクラスの長所と、BEMのクラス名ごとの性質の分かりやすさをいいとこ取り。

短所

• 接頭辞はSMACSSという規則を知らない人が見ると意味がわからない。
• Layoutだけ接頭辞つきというのがどうも気持ち悪い(個人的に)。

命名規則の選択

これまでに紹介した3つの命名規則は、大きく分けると二つの思想に分かれます。
シングルクラスか（BEM）、マルチクラスか（OOCSS、SMACSS）。
どちらを選択するかは好みになりますが、それぞれに明確な長所と短所があるので、ルールを決めてコーディングを進めてから後悔しないような選択をしたいところ。

オレオレ（わたしわたし）ルールを作る

私の場合、最近は独自ルールを作って用いることが多くなっています。

• シングルクラスはCSS上で扱いづらいのでマルチクラスにしたい。
• 分かりづらい接頭辞は使いたくない。
• 基本->拡張という概念はクラス名で表したい。

といった個人的な思いを踏まえて、BEMの命名規則の分かりやすさを活かしたままマルチクラスを用いる命名規則を考えます。
その一例として、以下のような命名をすることがあります。

<div class="main">
<div class="panel panel--bordered panel--wide">

バナーのパネルに対して、基本スタイル.panelと、その拡張である.panel--borderedを併せて設定しています。
BEMほど一つ一つのクラス名が長くならず、またCSSも基本スタイルと拡張スタイルを素直に書き足していけるので、なかなか書きやすいのです。
"panel"という名称が一つの要素に何度も出てくる座りの悪さは否めないものの、BEMの名前の複雑さに比べれば許せるでしょう。
サイト構造によってはこの命名規則がハマらないことも当然あるので、その場合はそのサイトに合わせてルールの方を調整することにしています。
ルールに振り回されない。私(コーディングする人)がルールなのだ。

まとめ

HTML/CSS命名規則はあくまで「原則」として働くものなので、当然例外は出てきてしまうし、厳密にルールに従うことが常に正しいとも限らないと思っています。
「作りやすさ」「読みやすさ」「拡張性」などをバランス良く意識しつつ、自分で気持ちのいいネーミングを模索しましょう。
結局、最終的に一番大事なのは「書いていてしっくりくるかどうか」ですよね！