はじめに
この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。
前回はCSS設計の第一歩として、「抽象化」・「分ける」 という２つの視点からホームページを眺めてみて、その中で共通するメディアやボタンといったコンポーネントについてお話ししました。
今回はそこからもう少し視野を広げて、複数のコンポーネントが集まったセクションがあり、そのコンポーネント同士の隙間(margin)をどのように設定するか、というテーマで考えていきたいと思います。
前回の振り返り
前回の記事はこちら↓
最初に軽く前回のおさらいをしておきます。
ボタンとメディアという２つのコンポーネントの関係について説明しました。
このメディアにはボタンが内包されており、ボタンのクラス名を.media-btnとするのか、.btnとするのかという問題でしたね。
そして、この場合は.btnとして、メディアとボタンそれぞれが独立している方がCSS設計としては正しい、というお話でした。
<div class="media">
<img src="../images/sample.jpeg" alt="sample" class="media-img" />
<div class="media-body">
<h3 class="media-title">タイトルタイトルタイトル</h3>
<p class="media-text">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="btn">詳細はこちら</a>
</div>
</div>
今回のテーマ
では今回はCSSに焦点を当てて、メディアが複数集まったケースを考えてみましょう。
ホームページでよく見る形ですね。
HTMLとしては、前回登場した<div class="media">が３つ並んでおり、それを囲むdiv要素があるといった形です。
さて、今回のテーマは <div class="media">の隙間（margin)をどのようにCSSで書くかなのですが...
スタイルの上書きの発生
まず真っ先に思い浮かぶのは<div class="media">にmargin-bottomを指定することだと思います。
（最後の要素はmargin-bottomが不要のため、:last-childで０としています。）
.media {
margin-bottom: 30px;
}
.media:last-child {
margin-bottom: 0;
}
余談ですが、こうした複数のアイテムが並ぶレイアウトで最後の要素のみスタイルを付けたくない場合、:not()を使うことでコードがスッキリします！
非常に便利ですので覚えておくと◎
/* これで上と同じ意味のコードになります */
.media:not(:last-child) {
margin-bottom: 30px;
}
これで特段問題なさそうですし、事実このようにスタイルを当てているホームページも多いのですが...
懸念点を挙げるとすれば、このメディアをserviceだけではなくcompanyという別のセクションでも使うことになったとき、このmargin-bottom: 30pxを上書きしなければならない可能性があるのです。
たとえば、companyセクションではメディア同士の隙間が30pxではなく60pxだったとします。
メディアには既にmargin-bottom: 30pxを付与しているため、companyセクションの.mediaについてのみスタイルを上書きしてやる必要がありますね。
/* 既存のコード */
.media {
margin-bottom: 30px;
}
.media:last-child {
margin-bottom: 0;
}
/* .mediaのスタイルを上書き */
.company .media {
margin-bottom: 60px;
}
実際どのようにスタイルが上書きされているかというと、Google Chromeの開発者ツールで見るとわかりやすいです。
このように既存の.mediaのmargin-bottom: 30pxが打ち消されているのがわかりますね。
正直この程度であればこのままでも問題ないのですが、大規模なウェブサイトでこうしたスタイルの上書きをどんどん繰り返していると、いずれ修正が非常に困難なCSSになってしまいます😭
この問題を解決すべく、CSS設計における１つの対処方法をご紹介します！
マルチクラスを採用する
CSS設計では、そもそもこのような不要なスタイルの上書きを起こさないように、コンポーネントはレイアウトに関わるスタイルを持たないという考え方を取っています。
ではどうするかというと、marginなどのレイアウトに関わるスタイルは<div class="media">にもう1つ別のクラスを付与してそのクラスが担当すればOK、という方法です。
まずはコードを見てみましょう。
このように<div class="media">に.service-mediaという別のクラスを与えて、そのクラスがmargin-bottomを担当すれば.mediaがmarginを持つ必要もなく、スタイルの上書きも不要になります。
cssはこのように変わります。
/* メディアコンポーネント */
.media {
/* margin-bottomは指定しなくてよい */
}
/* serviceセクションのメディア */
.service-media {
margin-bottom: 30px;
}
/* companyセクションのメディア */
.company-media {
margin-bottom: 60px;
}
このようにマルチクラスにすることで、メディアがmarginを持つことなく、スタイルの上書き問題も解消されました！
今回のタネあかし
実はここまでお話ししてきた内容は、CSS設計の手法の１つである「BEM」の「Mix」というテクニックを使っていました。
おそらくCSSを勉強し始めると、早い段階で「BEM」を目にすると思います。
BEMについて解説されている記事はたくさんありますが、今回は難しい用語や説明は抜きにして、もっとCSS設計の根本的な考え方に触れてもらいたかったので、BEMの説明はあえて省かせていただきました
ちゃんとしたBEMやMixの書き方が気になる方は、上記のリンクを見てみてください。
今回の記事は
- 思いつくままにCSSを書いていると、スタイルの上書きが頻発してあとで苦しくなる
- そうなる前に、ちゃんと考えてmarginとか付けようね
ということが伝わっていたら嬉しいです！
おわりに
今回はCSS設計の１つ、BEMのMixについて具体的にホームページの一部を見ながら説明してみました。
実はこのマルチクラスの設計によって、もう１つ「詳細度が一定に保たれる」というメリットも生まれるのですが、そちらについては次の記事でご紹介したいと思います！