こんにちは。コーディングファクトリー部の丸山です。
コーディングガイドライン策定についての連載第3回目です。
前回は以下のガイドラインの変更点 1、2 をお伝えしました。

今回は中でも白熱した議論が繰り広げられた 3 の「classの命名ルール」のお話をします。
 

CSS命名ルールを変更した意図

Webを取り巻く環境は時代とともにどんどん変わっていきます。
コーディングガイドラインも時代の流れに合わせて、細かい部分のチューンナップはその都度行っていましたが、コーディングガイドラインが登場した頃とは設計思想や実装手法も変わってきており、現場のコーダーたちも、「この命名ルールはどうにかならないのか」や「大規模な案件での変更や修正がこのままだと大変だ」と日に日にガイドラインのCSSルールをどうにかしたいという気運が高まっていました。
 

長期間にわたる白熱した議論

CSSの制作ルールはやはり「コーダーの生命線」とも言える箇所です。
皆こだわりや要望が強く、議論は長期間にわたり行われ、ミーティングの回数だけでも約10回と回数を重ね、以下のような意見が出ました。

そこで、私たちコーダーは主に設計思想（サイトの設計に関わる CSS のクラスの当て方）とクラスの命名ルールについて細かい部分まで丁寧に話し合うことにしました。
 

コーディングファクトリーの新しい設計思想と命名ルール

新しいコーディングファクトリーのCSS設計の考え方は、最近の世界的な CSS の標準となってきている OOCSS や SMACSS に代表されるモダンな設計思想から良いところを取り入れつつ、私たちの制作に合うように調整を行い完成しました。
 

モジュールという考え方

最近のサイト設計では、出来る限りパーツとパーツをそれぞれ役割ごとにひとまとまりにして、汎用的に使うという流れが多いようです。
そのため、役割ごとにわけたパーツを「モジュール」とし、それに対してクラス名を命名することにしました。

具体的には、以下のような考え方です。

1. モジュール自体が意味や特徴を持っているもの（見出し・テキスト・リストなど）

見出しなら見出し（ h1 や h2 または h1 などを囲む div ）、リストならリスト（ ul や ol、dl ）で切り分けて、それぞれ .ttl-XXX や.list-XXX と命名する。

2. 複数の要素から構成されているが、１セットで使いそうなもの

１まとまりのセットを囲った部分で切り分けて、それを囲った div に.mod-XXX と命名する。
 

役割ごとに接頭辞をつける

Webサイトの中に「意味のないパーツ」というものはほとんど存在しません。
例えば、見出しであれば「見出し」という役割がありますし、クリックできるボタンであれば「ボタン」という役割があります。
その役割に対して、適切な接頭辞をつけていきます。例えば、見出しであれば「.ttl-level-01」のような感じです。
主な接頭辞の詳細についてはガイドラインでご紹介していますので、ご覧ください。
 

なぜモジュールに接頭辞をつけるべきなのか

前述のとおり役割を持たせて接頭辞をつけるというルールにしておくと、１人で制作する場合は半機械的にクラス名をつけることができ、コーディングの高速化につながります。また、複数人で制作する場合は個々人のコーディングの技量差や知識差によるクラス名のバラつきをある程度均一にできるというメリットがあります。

また、接頭辞をつけて HTML に役割をつけておけば、HTML ソースだけを見たときも
「<div class="btn-information"> ・・・」
と目に入れば、接頭辞で
「なるほど、これはボタンなのね。ふむふむ」
と一瞬で誰でも理解できるというメリットもあります。
CSSについても同様に、例えば1ファイルにすべての記述をまとめた場合にも、接頭辞があることで視認性を向上できます。
 

まとめ

「新ガイドライン・CSSルール」の強みは、

です。

皆さんもぜひCSSの設計や命名を見つめ直して、より良い発見や知見を広げてみてください！

ガイドラインお申し込みフォームへ