ホームページを眺めながらCSS設計の初歩を学ぼう【BEM Mix体験編】

Posted at 2024-06-20

はじめに

この記事は『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;
}