実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』

今回読んだ本

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。

以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。

自分のCSS設計の現状

普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。

• SCSS＋BEM記法を使用
• セレクタにHTMLタグ、idは使用しない
• 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり）
• 既に定義されているスタイルの打ち消しは避ける

ハイライト

「時期尚早な最適化はすべての悪の根源である」
この本を読んで初めてこの言葉に触れましたが、今まで我流でCSSの勉強を進めてきた自分に特に刺さった言葉です。

規模の小さな個人制作レベルのコーディングで、得意になってボタンやリストといったコンポーネントを抽象化して、実際に再利用したのは数える程度だった気がします笑

振り返ってみると、似て非なるコンポーネントを無理に共通化してしまって、個々の些細な違い（色、サイズ、挙動など）に苦しめられるケースが多かったです。

そんなときは大抵「そもそもなんでこんなデザインにしたんだろう」と疑ってかかってしまうのですが、先の言葉を受けて「自分で勝手にコンポーネントを共通化して、勝手に苦しくなっているだけだった」という気づきを得ただけでも、非常に価値のある内容でした。

復習も兼ねてコードを書いてみる

例題として簡易的なヘッダーをHTMLとSCSSで実装してみます。
CSS設計はBEMを使用します。

左側にサイトロゴ、右側にナビゲーションが配置されており、ディスプレイが600px以下でナビゲーションがハンバーガーメニューに置き換わります。

皆さんならどのようなHTML構造にして、どのようにスタイルを当てていくでしょうか？

「コンポーネント」という視点で考えると、登場人物は次の3人になりそうです。

1. ヘッダー
2. ナビゲーションメニュー
3. ハンバーガーメニューボタン

これを元にコーディングしていくと、自分であればこんな感じになります。

HTML

　　　　<header class="header">
    <div class="header__inner">
      <h1>hogehoge</h1>
      <nav class="global-nav">
        <ul class="global-nav__list">
          <li class="global-nav__item"><a class="global-nav__link" href="#">お知らせ</a></li>
          <li class="global-nav__item"><a class="global-nav__link" href="#">導入実績</a></li>
          <li class="global-nav__item"><a class="global-nav__link" href="#">採用情報</a></li>
          <li class="global-nav__item"><a class="global-nav__link" href="#">会社概要</a></li>
        </ul>
      </nav>
      <button class="hamburger-button">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

SCSS

.header {
  &__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    border-bottom: 1px solid #666666;
  }
}

.global-nav {
  &__list {
    display: flex;
    column-gap: 24px;
    list-style: none;
    font-size: 0.875rem;
  }
  &__link {
    text-decoration: none;
    color: inherit;
  }
}

.hamburger-button {
  background-color: inherit;
  border: none;
  display: none;
  cursor: pointer;

  span {
    display: block;
    width: 35px;
    height: 1px;
    background-color: #333333;
    &:not(&:first-child) {
      margin-top: 10px;
    }
  }
}

@media screen and (max-width: 600px) {
  .global-nav {
    display: none;
  }
  .hamburger-button {
    display: block;
  }
}

ポイントはナビゲーションをヘッダーの一部ではなく、 単一の「global-nav」として定義する点てす。

例えばこれを「header__nav」としてヘッダー一族として定義するケースもあるでしょう。
しかし、このWebサイトのフッターで使ったり、ハンバーガーメニューをクリックしたときに表示されるナビゲーションで使うかもしれません。
そんなときに「ヘッダー」という場所（HTML）に依存したクラス名にしてしまうと、使い回しが難しくなってしまいます。
そこで、汎用性のある「global-nav」という命名にしました。

（ちなみに、global-nav__itemの下のaタグにまでクラスを振っていますが、aタグのデフォルトのスタイルをリセットする指定は、aタグ全体ではなく、個別に指定したほうがスタイルの影響範囲が狭く、修正が容易になります。）

無論ヘッダーとフッターでナビゲーションのデザインが異なる場合にはそれぞれで定義した方が良いでしょう。それこそ「時期尚早な最適化はすべての悪の根源である」になってしまいますので。

総評

古い書籍ですので、どうしても flexboxの解説が少なかったり、参考サイトのリンクが切れていたりしますが、そもそもCSS設計において大切な概念を習得するという意味で、参考になりました。
今後もっと大きなプロジェクトに携わったり、既存のサイトのリファクタリングの経験を積んで、いろいろな側面からCSS設計を学んでいこうと思います。

次回はあらためてCSS設計完全ガイド （分厚過ぎ） を読んで、CSS力の底上げをしていきます。

参考文献

• Web制作者のためのCSS設計の教科書
• Rule of three (computer programming)