こんにちは、上田です。
最近、谷拓樹さんが書いたCSS設計の教科書を読みました。
本の題名通り、CSSについて書かれているのですが、本書では、
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
これらを「より良いCSSのゴール」としています。
100%破綻せず、完璧なCSSというのはむずかしいですし、できなくて当然です。
しかし、「より良いCSS」に近づけることはできると思います。
そこで、本記事では、初学者向けに特に気をつけるポイントを３つまとめてみました。
CSSの学習を始めたばかりの頃は、ついやってしまいがちなことかと思うので、ぜひ参考にしていただければと思います！
01.HTMLに依存しないようにする（クラスを使う）
ものすごく基本的なことですが、初学者の方に伝えたいので、あげさせていただきました！
たとえば、下記のようにマークアップされていたとします。
<section> <h1>タイトル</h1> <div> <p>本文</p> </div> </section>
section h1 {
font-size: 24px;
color: #333;
font-weight: 700;
}
しかし、HTMLが以下のように中身が変わった場合、CSSにも変更が必要になります。
<div> <h2>タイトル</h2> <div> <p>本文</p> </div> </div>
div h2 {
font-size: 24px;
color: #333;
font-weight: 700;
}
そこで、あらかじめclassを使ってマークアップすれば、HTMLの構造が変わってもCSSの変更は必要なくなります。
<div> <h2 class="title">タイトル</h2> <div> <p>本文</p> </div> </div>
.title {
font-size: 24px;
color: #333;
font-weight: 700;
}
私も学習を始めたばかりの頃は、classを使ったり使わなかったりと、適当にCSSを書いていましたが、今はclassを指定して記述するようにしています。
02.スタイルの取り消しについて
一度定義したスタイルを0であったり、noneなどで取り消してしまうことはないでしょうか。
私はついついやってしまいがちなのでとりあげました。
たとえば、下線がついている見出しを以下のように作成したとします。
.title {
border-bottom: 2px;
margin-bottom: 1em;
padding: 10px;
font-size: 24px;
font-weight: 700;
}
しかし、下線のない見出しが必要になった場合、以下のように下線を取り消す記述が増えてしまいます。
.no-border{
padding-bottom: 0;
border-bottom: none;
}
そのため、下線をあらかじめ定義しておくのでなく、追加していくように作成します。
すると、結果的に無駄なコードをなくすことにつながります。
.title {
margin-bottom: 1em;
font-size: 24px;
font-weight: 700;
}
.headline{
padding-bottom: 10px;
border-bottom: 2px;
}
取り消すような指定が増え始めたら、一度振り返って書き直した方が、最終的には良くなるケースがあるかと思います。
03.要素セレクタを省略する
HTMLの構造を元にしてセレクタを詳細に書き過ぎてしまうと、詳細度をムダに高めてしまいメンテナンス効率を下げてしまうことも…
たとえば、
h2.title {
font-size: 24px;
font-weight: 700;
}
このような指定方法は、「h2」を省略しても問題ありません。
.title {
font-size: 24px;
font-weight: 700;
}
詳細度をムダに高めてしまい、のちのち変更があった時に「!importantで切り抜ける」ということがないように作成した方が良さそうです！
04.まとめ
CSSの設計で、特に初学者に重要だと思った下記３つのポイントをあげさせていただきました。
- HTMLに依存しないようにする（クラスを使う）
- スタイルの取り消しについて
- 要素セレクタを省略する
本記事では、かなりざっくりとした解説になっていますが、詳しく学んでみたい方は一度「CSS設計の教科書」を読んでみるのはいかがでしょうか。
初学者だけでなく、CSSの引き出しを広げていきたいコーダーさんにもおすすめです！
（私もとても勉強になりました）
最後まで読んでいただきありがとうございました！
