この記事は デジタルキューブ ＆ ヘプタゴン Advent Calendar 2024 の 12月11日分の記事です。
こんにちは。4月からプロダクトデザインチームでコーディングをがんばっているNおです。今日は「CSSは自由、だから難しい。」というお話をします。
CSS設計との出会い
CSSは同じ見た目を実現するのに複数の方法があります。
経験豊富なエンジニアであれば、メンテナンスのしやすさを考慮して最適な方法を選べるのでしょうが、実務経験の浅い自分にはその判断が難しかったり、そもそも知っている実装方法が限られているなどの問題があります。
先輩の書くCSSと自分の書くCSSを見比べて「先輩はどういう意図があってこういう書き方をしているのだろう？」という疑問を抱えていたときに出会ったのが「CSS設計」です。
余白の設計
CSS設計を学ぶ中でとくに興味深かったのは「余白の設計」についてです。
余白の方向を統一することで、コンポーネントを積み重ねるときの予測がしやすく、一貫性のある余白設計ができるという考え方でした。
Nお「なるほど！余白の方向を統一すればいいんだな…！」
マージンを下方向で統一することを覚えたNおは、嬉々として実践に入りました。
実践編
実際に直面したコードの例です。
左側が画像、右側がテキストという、Webサイトでよく見るレイアウトです。
<div class="block">
<div class="block__content">
<figure class="block__figure">
<img src="sample-image.jpg" alt="sample image">
</figure>
<div class="block__body">
<h3 class="block__heading">タイトル</h3>
<div class="block__description">説明文</div>
<div class="block__button"><a href="#">ボタン</a></div>
</div>
</div>
</div>
要素間の距離は全部 margin-bottom で書いてやるぜ！と意気込んでいたところで問題が発生します。
このボタンは「ある場合」と「ない場合」があるのです。
え？じゃ、じゃあ、説明文が一番最後の要素になったときにだけ margin-bottom を打ち消す……とか、かなぁ………どうやって書こう…………？
答えは単純です。
先輩「ボタンに margin-top をつければいいだけです。」
ええ、本当に、おっしゃる通りでございます。
学んだことに真っ直ぐすぎて足元が疎かになっていたことを反省しました。
まとめ
結局のところ、CSSの設計ルールは便利な指針ですが、状況に応じて柔軟に判断することが大切だと学びました。ときには「マージンを上方向にとる」選択が、よりシンプルで保守しやすいコードになることもあります。
あくまで設計思想の一つでしかない「余白の方向を統一する」ことに囚われ、CSSの特徴である柔軟さを忘れてしまっていた初学者のお話でした。
おまけ
ちゃんと下方向に統一で書くんだったらこうなるのかな？
.block__description {
margin-bottom: 0;
&:has(+ .block__button) {
margin-bottom: 20px;
}
}