【CSS】なぜidや要素そのものにスタイルをつけてはいけないのか

例えば以下のようにhtmlがあったとき、

idや要素自体にスタイリングするのはご法度とされています。

さてなんでダメなんでしょうか。

コーディングを長く続けていると、「あ、これはダメだな」と気付くんですが、まだ慣れていないうちはなんでダメなのかよくわからないと思います。そもそもダメだと言うことを知らない人もいるでしょう。

ダメな理由は、主にメンテナンス性が悪くなるからです。今回は、なぜ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

うわーめんどくさい!なんじゃこりゃ!!

そう、1ページにユニークな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設計が学べるでしょう。僕はもう技術を学ぶ気があまりないので買ってませんが、2年前ならおそらく買っていたと思います。みんないいって言ってましたよ!

おわり

CSSは、適当に書いてもブラウザでちゃんと見れればオッケー。最初は全然それでいいと思います。設計なんか考えてる暇ないくらいスケジュールパツパツの作業をすることもあるでしょう。

慣れてきたら、メンテナンス性を高める努力をしてみましょう。そうすることで、今後修正があるときに素早く終わらせたり、予期せぬ破壊を防ぐこともできます。またCSS設計を学び、より汎用性の高いcssを書けるようになったら、コーディングの速度も上がっていきます。

HTML/CSSコーディングは、ある程度慣れてくると、どうやって書けばこのデザインを実現できるかという思考から、どうやれば早く効率的に終わら...

とっととコーディングを終わらせて焼き鳥を食べて帰ろう!

それじゃ、バイバイ!