ども、@kimihom です。
CSS って言うと、目の前の部品の CSS だけをいじって、なんとかやり過ごすみたいなコーディングスタイルを取っている方が結構いるのではないだろうか。当然のことながら、その場しのぎの CSS プログラミングはやがて破綻し、開発効率を著しく低下させる原因になるし、多くのデザイン崩れを発症させる源になりかねない。
そこで今回は正しい CSS の書き方について改めておさらいしていきたいと思う。
常に影響範囲を気にしよう
CSS において最も手軽にデザインを変えさせられて、かつ危険であるのが、 CSS セレクタの指定方法である。例えば以下のような CSS を見てみよう。
.container { width: 980px; margin: 0 auto; }
<div class="container"> ... </div>
コンテンツをセンタリングさせる方法として、 container クラスを作ることはよくある。さて、この container はいわば"グローバル領域"に放り出された CSS である。HTML の中で container クラスを指定すれば全てに適用されてしまうという最高にワイルドな状態だ。
「"container" くらいはグローバルでもええやろ」という考えの方ならそれでいいのだろうか。ここが CSS の難しいところで例えば
#main .container { background-color: #f2f2f2; }
みたいな、#main の container だけに適用するみたいなコードを書くことがあるかもしれない。#main .container だけであればそれほど問題になることはないかもしれないけど、このような 特別な container がどんどん作られていくと、もはや何が何だか分からなくなってくる。そうして、グローバルの .container をいじってしまうと、他の思いもよらぬところに書いてある container が意図しないデザインとなってしまったり、崩れてしまったりする。
ここから学ぶべきことは、グローバルな CSS 設定は被らない名前で、かつ全体で共通であるもの、基本的にカスタマイズできないもの を定義するようにすべきだ。先ほどの例で言えば、 #main .container で背景色を指定するのは間違えていて、他のクラスを定義してそれの背景色を変えるようにすべきだ。
グローバルに持っていくのは、例えば .clearfix や .corner、.container などといった、基本的に共通で必ずそれしかないもののみに留めよう。
コンポーネント単位で ID を振って平穏を保とう
HTML では設計が必要だ。ページ中にある要素をそれぞれコンポーネントとして分割し、それぞれに ID を振って CSS がぐちゃぐちゃにならないようにしなければならない。
部品としてまとめるために、最後にCmp などの接尾語を設けると良い。これは、例えばheader というクラスを他で誤って指定してしまっても影響が出ないようにするためだ。何かしら部品の最上位の ID で個別で割り当てられる何かであれば何でも良い。こうすれば、
#headerCmp { ... } #mainCmp { ... } #diaryIndexCmp { ... } #diaryDetailCmp { ... } #sideCmp { ... } #footerCmp { ... }
という感じで、それぞれコンポーネント内だけにしか影響の受けないCSSを書くことができる。このコンポーネント内は基本的に HTML のクラスで指定してあげると良いだろう。CSS でコンポーネント以外の ID はあまり使わなくて良いだろう。 JavaScript 側で何か必要な時に入れるくらいだ。
このようにコンポーネント単位で分けると、CSS のファイル分割も可能になり、見通しの良い CSS を書くことができるし、程よく共通化することができる。
しっかりと"まとめる" ってことをしていけば、メンテナンスしやすい CSS をコーディングし運用していくことができる。さらに適切に分割すれば、"コピペして他のところも同じようにする"、 みたいなプログラミングでやっちゃいけないことをしなくて済むようになる。CSS もプログラミングだというのは、こうした点からである。例えば管理画面とランディングページの body タグにそれぞれ ID を割り当て、それぞれに適用できる共通 CSS なども定義できるだろう。
#landing { ... } #console { ... }
とにかく、影響範囲に気をつけながらも部品をまとめていこうということだ。
デフォルトの CSS では、この影響範囲を絞ることが難しいので、LESS や Sass を使うのはほぼマストとなってくるだろう。これらを使えば、CSSを階層表示できる。
#landing { ... // #landing #mainCmp {..} と同じ #mainCmp { ... } }
ちょっとした開発環境のセットアップに時間がかかるかもしれないが、その時間は間違いなく無駄にならないので頑張って欲しい。
終わりに
CSS において大事なのはこれだけって言ってもいいかもしれない。これさえ気をつければ、あなたも幸せな CSS コーディングライフを過ごすことができるだろう。
ただ闇雲に新しく CSS の指定を作るのではなく、毎回 CSS を適用する時には"設計"の思考を巡らせ、最適なコーディングをしていこう。
