2016年06月

8

水曜日の投稿

丸山 智之
投稿者:丸山 智之
(フロントエンドエンジニア)

2016年06月08日

新しい時代のCSSへ
〜コーディングガイドライン策定 #03〜

コーダーのあーだこーだ

丸山 智之
投稿者:丸山 智之(フロントエンドエンジニア)

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

1.Webを取り巻く環境の変化にあわせて、新しく追加した項目
2.これまでガイドラインで定められていたが、現状不要になった項目の削除
3.classの命名ルール

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

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

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

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

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

  • ローワーキャメル方式の変更が必要じゃないか? 大規模な案件になるとやりにくい
  • 一つの設計思想( OOCSSBEM 等)に固執したくない
  • idを使った方法をとっているがidは今現在スタイルを当てるものではないのではないか?
  • .ul_basicなど、タグ名をクラス名にするのはよくないのではないか。
  • 既存のCSSの設計をカスタマイズしていくほうがいいのでは?
  • jsを使用するものは頭にjsを当てたい。js と styleを分離できるため
  • 長い単語の区切りについてはローワーキャメル?アンダースコア?
  • パーツ化して制作した方がいい
  • パーツとして見られる所でくぎり、ネストは深くならないようにしている
  • 思想もいいけど命名規則も決めた方がいい
  • 思想から考えた方がいいのではないか?
  • 末尾の連番にはこだわらなくてもいいのではないか。その方が汎用性も上がる。
  • 連番ではなく具体的な名詞を付けてクラス名を当ててくれというお客様の声があった
  • 連番の代わりに具体的な名前を決めればいいのではないか?
  • 役割でクラス名は分けた方がいい
  • バリエーションのあるパーツについては連番でもいいのでは?
  • 自由度が高すぎるのはよくないから、現ガイドラインぐらいの縛りはあった方がいいのでは?

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

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

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

モジュールという考え方

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

  • コーディングの高速化が期待できる点
  • 複数人制作で各々のクラス名の考え方などを出来るだけ排除して、コーディングのディレクションを行いやすくする点
  • HTML、CSSソースの視認性が向上する点

です。

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

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

この投稿を書いた人

丸山 智之

丸山 智之(まるやま ともゆき)フロントエンドエンジニア

コーディングファクトリー部所属。大分の湯布院出身。大学在学中にWeb制作に興味を持ち、独学を経て、上京しコーディングファクトリーへ。アニメとコーディングが好き。
「キングスマン」と「劇場版けいおん」を見てイギリスに行きたい欲が再加熱してます。英語頑張りたい。

丸山 智之が書いた他の記事を見る