こんな感じでしょうか。
長所
- 名前を付ける対象が"機能"や"性質"なので、名前を考えるのが楽。
- 一つ一つのクラス名が短くなる。
短所
- 色々なクラスの組み合わせでスタイリングするので、CSSが複雑になる。
- 例外に弱い。ここはマージン10pxだけどこっちは5px、とか言われると困る。
BEM
おそらく最もメジャーなHTML/CSS命名規則。
「名は体を表す」とばかりに、一つのクラス名に出来る限りの情報を詰め込むのが特徴です。
__B=Block__、__E=Element__、__M=Modifier__の略で、これらをblock__element--modifierという形で接続したものがクラス名になります。
Elementは要素で、Blockはその要素のかたまり。Modifierは基本のスタイルから派生させる場合に追加します。
先程のバナーの例でいうと、
というような形になります。
長所
- 一つのクラス名でその要素の性質を表すことができる。
- 要素ごとにユニークな(あるいはそれに近い)名前を付けることになるので、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ではクラスごとに上記の「いずれか一つ」の性質を持つというルールがあります。先程のバナーの例でいうと、
となります。
長所
- クラスごとに一つの性質しか持たないので、各クラスの役割がわかりやすい。
- OOCSSのマルチクラスの長所と、BEMのクラス名ごとの性質の分かりやすさをいいとこ取り。
短所
- 接頭辞はSMACSSという規則を知らない人が見ると意味がわからない。
- Layoutだけ接頭辞つきというのがどうも気持ち悪い(個人的に)。
命名規則の選択
これまでに紹介した3つの命名規則は、大きく分けると二つの思想に分かれます。
シングルクラスか(BEM)、マルチクラスか(OOCSS、SMACSS)。
どちらを選択するかは好みになりますが、それぞれに明確な長所と短所があるので、ルールを決めてコーディングを進めてから後悔しないような選択をしたいところ。オレオレ(わたしわたし)ルールを作る
私の場合、最近は独自ルールを作って用いることが多くなっています。
- シングルクラスはCSS上で扱いづらいのでマルチクラスにしたい。
- 分かりづらい接頭辞は使いたくない。
- 基本->拡張という概念はクラス名で表したい。
といった個人的な思いを踏まえて、BEMの命名規則の分かりやすさを活かしたままマルチクラスを用いる命名規則を考えます。
その一例として、以下のような命名をすることがあります。バナーのパネルに対して、基本スタイル.panelと、その拡張である.panel--borderedを併せて設定しています。
BEMほど一つ一つのクラス名が長くならず、またCSSも基本スタイルと拡張スタイルを素直に書き足していけるので、なかなか書きやすいのです。
"panel"という名称が一つの要素に何度も出てくる座りの悪さは否めないものの、BEMの名前の複雑さに比べれば許せるでしょう。
サイト構造によってはこの命名規則がハマらないことも当然あるので、その場合はそのサイトに合わせてルールの方を調整することにしています。
ルールに振り回されない。私(コーディングする人)がルールなのだ。まとめ
HTML/CSS命名規則はあくまで「原則」として働くものなので、当然例外は出てきてしまうし、厳密にルールに従うことが常に正しいとも限らないと思っています。
「作りやすさ」「読みやすさ」「拡張性」などをバランス良く意識しつつ、自分で気持ちのいいネーミングを模索しましょう。
結局、最終的に一番大事なのは「書いていてしっくりくるかどうか」ですよね!
- タグリスト
- Webデザイン
- JavaScript
- Movable Type
- アプリ
- CMS
- Webプロモーション
- CSS
- オーサリング
- Creators Lab まとめ
- 映像制作
- クレバー藤原
- MD社内イベント
- Webディレクターのノウハウ
- Web開発
- スマートフォン
- Android
- MONSTER STUDIO
- jquery
- コーディング
- プランニング
- MTタグを極める
- iOS
- サマンサ先生
- iPhone
- プログラミング
- 効率化
- After Effects
- PHP
- プラグイン
- プロジェクト管理
- ワークスタイル
- Google Analytics
- Webディレクション
- 弾丸ツアー
- Grunt.js
- Photoshop
- ソーシャルメディア
- 新入社員
- 新卒採用
- 早朝がいちばん捗るヒト
- 用語集
- HTML5
- MONSTER DIVE
- WordPress
- YouTube
- アクセス解析
- ディレクション
- 人事
- PowerCMS
- Sass
- カテゴリアーカイブ