web制作現場の悩みの種。破綻しにくいCSSの設計について考えてみた

Pocket
[`evernote` not found]

最近、色々なところでCSSの設計に関する記事を読む機会が増えています。
はやり?このネタに関してはすごく切実な問題で、どうにかしないといけない常々感じていたのでちょうどいい機会なので、すこし考えてみようと思います。

経験的に行なっている事を中心に書きますが、これから導入しようと思うことも合わせて紹介します。参照元も掲載しますのでご了承ください。

まず前提としてジブンB型なのであまりガチガチなルールは、いやです。そんなの決められても困ります。「その辺はニュアンス」って言葉大好きです。(松本の方言でいうところの「なから」ってやつ)なので、ルールといっても方向性的な感じなゆるゆるなものだと思ってください。

矛盾しますが、ルールがあると効率がいいのは事実です。
基本的なことは、ルール化してルーチン的に処理できるのが理想ですよね。

セレクター名って決めるの難しい

CSSを書く上で、けっこうウェイトが大きいのがセレクターの命名ではないかと思います。
最近はなれてきたので、あまり考えずにホイホイと書いていますが、コーディングを始めたころは苦労したのを覚えています。
効率的な管理という面でも、わかりやすいセレクタ名をつけるというのは必須だと思います。
他人でも理解できる=10ヶ月後の自分でも理解できるということですね。
・・・自分で書いてて耳が痛い

そんな訳で、前置きが長くなりましたが、まずありがちなセレクタ名を分類してみます。

フレームとしてのセレクター

例)header main sub footer
レイアウトする上で、基盤となる枠組をつくるためのセレクターです。
主にIDで示される。

少し汎用的な固まりを示すセレクター

例)section item block box
文章のブロックや画像群など、ブロックごとに使い回すようなセレクター。

固有名詞的につかうCSSセレクター

例)hogehogeBnr
CSSスプライトなどを使う時に「このバナー」を特定するためのセレクターです。

ワークフレームとして使うCSSセレクター

例)clearfix mB10
善し悪しは別として、特定のプロパティをセットにしたセレクター。
clearfixとか

jsなどのトリガーとして使うCSSセレクター

特に説明は不要ですね。

ざっと思いつく限りですとこんな感じだと思います。

どうやったら効率よくセレクタ名を決める事ができるか?

ここでルール付けが必要になってきます。
上記の分類を参考に、フレームや汎用的なブロック、ワークフレームはルール化ができますね。

フレーム containaer(コンテナブロック),header(ヘッダー),
main(メインカラム),sub(サブカラム)
汎用的な固まり section,item,block,box
leftCol(左側のブロック)rightCol(右側のブロック)

※ワークフレームとしてのセレクタは少し意味合いが違うので省略します。

mod組みという考え方

codegridを読んでいて知ったのですが、高津戸さんが提唱するCSSの書き方なのですが、CSSを設計するときにモジュール(部品)に分けて書いていくという考え方です。
詳しくはcodegridをご覧ください。

mod組でいいなと思ったのが、セレクタの命名が直感的になるんじゃないかということです。
先に紹介したフレームと汎用的なブロックを組み合わせると
main-section header-leftCol のような絞り込まれたセレクターができます。
こうすれば、大規模なサイトを作る時にセレクタの競合が起こる事がすくなくなります。

この考え方はsassを利用したCSSスプライトでも使えます。
sassでのCSSスプライトはスプライトしたい画像名に依存してCSSの記述を書いてくれるのですが、
無計画にファイル名を記述すると、アルファベット順にならんでしまうので書き出されたCSSはかなりカオスになってしまいます。
そこで、モジュール名(フレーム)を接頭詞にして画像のファイル名をつけると、フレーム毎にまとまって書き出されますので、管理しやすくなります。

ワークフレームとしてのCSS

これ最近導入して、かなり便利だと思っています。
どうゆうことかというと、よく使うようなスタイル群を予め定義しておいて、htmlコーディング時にそのクラスを指定するだけでスタイルを適用させるという事です。

例えば、下方向にマージンを10px取りたい場合

<ul class="hoge">
 <li>ほげほげ</li>
</ul>
ul.hoge {
 margin-bottom:10px;
}

と書けばいいのですが、いちいちCSSを書くのはめんどくさい!ので
事前に

.mB10 {
 margin-bottom:10px;
}

と定義しておいて、htmlをコーディングする時に

<ul class="hoge mB10">
 <li>ほげほげ</li>
</ul>

と下方向にマージンを10pxとるクラスを定義するだけでよくなります。予め良く使うスタイルが定義してあれば、いちいちCSSを記述しなくてもすみますので、コーディングのスピードを上げる事ができます。
※あまり定義しすぎると、不要な記述が多くなったり、管理しきれなくなるので、最低限にした方がいいと思います。

命名ルール

少し余談っぽいですが、命名ルールもある程度統一しておいた方がいいかと思います。
たとえば、単語をつなぐ時にキャメルケースにするのか、「-」なのか「_」なのかとか。
※キャメルケースは単語をつなぐ時に後につづく単語の頭文字を大文字にする記述法です。
hogeItem みたいな感じ。

先述のmod組でいうと、確実に2つ以上の単語がつらなりますので、ルール化しておかないと却って分かりにくくなってしまいます。
個人的にはmod組の時は「-」でつないで、それ以外はキャメルケースというルールでやっています。

まとめ

セレクタ周りにしぼってまとめてみましたが、CSSは簡単なようですごく奥が深いと思いますので、他にも改善すべき箇所はたくさんあります。

ウチの環境はわりと小規模なので、コーディングを複数人で行なう事はあまりありませんが、メンテナンスも考えると一人で完結する事はまずありませんし、CSSのコーディングなんてサイト公開したら忘れてしまうものですので・・・

今回考えたルールがどこまで正しいかわかりませんが、余計な事を考えずに効率よく綺麗にかけるように、仕組みを考えていければと思っています。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。