13. 保守しやすいCSSの書き方

この章では、保守しやすいCSSの書き方を学びます。

小さな練習ではCSSが少ないため、多少雑に書いても動きます。

しかし、ページ数やパーツが増えると、どこに何を書いたのかわからなくなり、修正するたびに別の場所が崩れることがあります。

CSSが散らかる原因

CSSが管理しづらくなる原因は、いくつかあります。

  • クラス名のルールがない
  • 同じような指定を何度も書く
  • セレクタが深すぎる
  • その場しのぎで!importantを使う
  • 余白や色の数値がばらばら
  • 共通パーツとページ固有の指定が混ざる
  • CSSの書く場所が決まっていない

最初から大きな設計手法を覚える必要はありません。

まずは、読みやすく、探しやすく、上書きしやすいCSSを目指します。

クラス名の付け方

クラス名は、部品や役割が伝わる名前にします。

HTML
<article class="service-card">
    <h3 class="service-card-title">Webサイト制作</h3>
    <p class="service-card-text">目的に合わせてサイトを制作します。</p>
</article>
CSS
.service-card {
    padding: 24px;
    border: 1px solid #ddd;
}

.service-card-title {
    font-size: 20px;
}

.service-card-text {
    line-height: 1.8;
}

このように、まとまりの名前を先頭に付けると、どのパーツのスタイルかがわかりやすくなります。

既存のプロジェクトに命名ルールがある場合は、そのルールに合わせます。

見た目だけの名前を避ける

見た目だけを表す名前は、あとで意味がずれることがあります。

避けたい例:

  • .red-button
  • .big-title
  • .left-box
  • .blue-area

たとえば、.red-buttonという名前のボタンが、後から青に変わると名前と見た目が合わなくなります。

次のように、役割で名前を付ける方が管理しやすいです。

  • .primary-button
  • .section-title
  • .profile-card
  • .contact-area

色や大きさはCSSで変わることがあります。

役割は比較的変わりにくいので、クラス名に向いています。

共通パーツとページ固有

CSSは、共通パーツとページ固有の指定を分けると管理しやすくなります。

共通パーツの例:

  • ボタン
  • カード
  • セクション
  • フォーム
  • ヘッダー
  • フッター

ページ固有の例:

  • トップページのヒーロー
  • 採用ページの社員紹介
  • お問い合わせページの注意書き

共通で使うパーツは、ページが変わっても使えるようにします。

ページ固有のスタイルは、そのページだけで使う前提で名前を付けます。

変数を使う

CSSでは、カスタムプロパティを使って値をまとめられます。

CSSカスタムプロパティ
:root {
    --color-text: #333;
    --color-primary: #005bac;
    --space-section: 80px;
}

.section {
    padding: var(--space-section) 0;
    color: var(--color-text);
}

.button {
    background-color: var(--color-primary);
}

色や余白を変数にしておくと、全体の調整がしやすくなります。

ただし、最初から何でも変数にする必要はありません。

繰り返し使う値や、あとから変わる可能性が高い値からまとめます。

リセットCSSとベースCSS

ブラウザには、最初から付いている標準スタイルがあります。

見出しに余白があったり、リストにマーカーが付いていたりするのは、そのためです。

プロジェクトによっては、リセットCSSを使ってブラウザの差を減らします。

ただし、リセットCSSを入れると、リストのマーカーや見出しの余白なども消えることがあります。

その場合は、本文エリアのスタイルとして必要な見た目を戻します。

本文リストの例
.article-content ul {
    padding-left: 1.5em;
    list-style: disc;
}

.article-content ol {
    padding-left: 1.5em;
    list-style: decimal;
}

リセットCSSは便利ですが、消えた見た目をどこで戻すかも考えます。

CSSを書く順番

CSSは、書く順番を決めておくと探しやすくなります。

例:

  1. リセット
  2. ベース
  3. レイアウト
  4. 共通パーツ
  5. ページ固有
  6. ユーティリティ

必ずこの順番にする必要はありません。

大切なのは、プロジェクト内で一貫させることです。

どこに何を書くかが決まっていると、修正時に迷いにくくなります。

ユーティリティクラス

ユーティリティクラスとは、単一の役割を持つ小さなクラスです。

たとえば、視覚的には見せないけれどスクリーンリーダーには読ませるクラスがあります。

visually-hidden
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

ユーティリティクラスは便利ですが、使いすぎるとHTMLに見た目の指定が増えすぎることがあります。

プロジェクトの方針に合わせて使います。

よくある失敗

  • ページごとに同じボタンCSSを何度も書く
  • クラス名が見た目依存になっている
  • 強いセレクタで上書きし続ける
  • 色や余白の値が散らばっている
  • リセットCSSで消えたリストやフォームの見た目を戻していない
  • 共通パーツの変更で別ページが崩れる

CSSは、増えるほど整理の差が出ます。

最初は小さなルールでよいので、同じ考え方で書き続けることが大切です。

この章のまとめ

  • CSSは増えるほど、命名、共通化、書く場所のルールが重要になる
  • クラス名は見た目ではなく役割で付ける
  • 共通パーツとページ固有のスタイルを分ける
  • 色や余白はカスタムプロパティでまとめると調整しやすい
  • リセットCSSを使う時は、必要な本文スタイルを戻す