例えば以下のようにhtmlがあったとき、
|
1 2 3 4 |
<div id="sample"></div> <div class="example"> <p></p> </div> |
idや要素自体にスタイリングするのはご法度とされています。
|
1 2 3 4 5 6 7 8 9 |
#sample { background-color: #eee; padding: 20px; } .example p { font-size: 14px; margin-bottom: 10px; } /* ダメです */ |
さてなんでダメなんでしょうか。
コーディングを長く続けていると、「あ、これはダメだな」と気付くんですが、まだ慣れていないうちはなんでダメなのかよくわからないと思います。そもそもダメだと言うことを知らない人もいるでしょう。
ダメな理由は、主にメンテナンス性が悪くなるからです。今回は、なぜidや要素自体にスタイリングしてはいけないのかを学んでみましょう。
idにスタイリングすると、こうなる
とりあえずidにスタイリングしてみましょう。
See the Pen not id 1 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark
別段問題ないように見えますね。しかし、ここでもう一つ全く同じスタイルの要素を追加したい場合、どうでしょうか。
See the Pen not id 2 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark
うわーめんどくさい！なんじゃこりゃ！！
そう、１ページにユニークなidは一つしか使えないため、同じ形の要素でも別のidを振らなきゃいけないので、こうなっちゃいます。
更にもう一個、二個と増やしたい場合どうしよう。地獄ですね。考えるのをやめましょう。
当然ですが、idではなくclassにしておけば何個でも同じ要素を複製できます。
要素にスタイリングすると、こうなる
「idがだめなら要素にスタイリングすればええやんけ。」
なるほど。やってみましょう。
See the Pen not id 3 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark
お、いいかもしれません。しかしここで、全く別の形のulを追加したい場合…
See the Pen not id 4 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark
うーん、めんどくさい！しんどい！
何がしんどいって、結局classつけないと差別化できないのと、要素につけているスタイルを打ち消さなきゃいけないのがしんどいですよね。
しかもこれ、要素そのものに付与されているスタイルをいじると、他の知らないところでバグってることがよくあります。メンテナンス性悪すぎる。
これも最初からclassをつけていれば解決です。
でも、ほぼすべての要素にclassつけるのしんどい…
そこでCSS設計の出番です。
このCSS設計は、使用する人や思想によって違うのですが、一貫してメンテナンス性を向上させるために考えられています。そしてついでに命名にも悩まなくなります。
僕の場合、以下の記事のような設計で書いてます。
まぁこれもけっこう、案件やそのときの気分によって微妙に変わったり、守ってないこともあるのであやふやで割と適当なんですが…何も設計しないよりははるかにメンテナンス性はいいと思います。
しっかりCSS設計を学びたいなら、つい先月発売された以下の本をオススメします。最新のナウいCSS設計が学べるでしょう。僕はもう技術を学ぶ気があまりないので買ってませんが、２年前ならおそらく買っていたと思います。みんないいって言ってましたよ！
CSS設計完全ガイド ~詳細解説+実践的モジュール集
おわり
CSSは、適当に書いてもブラウザでちゃんと見れればオッケー。最初は全然それでいいと思います。設計なんか考えてる暇ないくらいスケジュールパツパツの作業をすることもあるでしょう。
慣れてきたら、メンテナンス性を高める努力をしてみましょう。そうすることで、今後修正があるときに素早く終わらせたり、予期せぬ破壊を防ぐこともできます。またCSS設計を学び、より汎用性の高いcssを書けるようになったら、コーディングの速度も上がっていきます。
とっととコーディングを終わらせて焼き鳥を食べて帰ろう！
それじゃ、バイバイ！
