CSS設計について

より良いCSSのゴール

予測しやすい

「イメージ通りの体裁になるか」ということです。
他のルールが影響してイメージ通りの体裁にならない、追記したルールが影響して他の箇所の体裁が崩れてしまうなどを防ぐことです。

再利用しやすい

「抽象的で機能ごとに分離されたこと」をいいます。
例えば、アラート表示の種類を「注意」と「警告」二つに分けた場合、重複(共通)するパーツを一つ用意し、そのうえで各アラートの種類ごとに色を付けるなど、同じコードが重複しないようにすることです。

保守しやすい

新しいルールを追加・更新する際に、既存のルールを壊さずに変更を加えることが可能な状態で、修正を容易に行えることをいいます。

拡張しやすい

プロジェクト関係者全員がメンテナンス・管理が容易に行えることをいいます。
サイトの規模が大きくなっていく場合でも、拡張しやすい設計になっていることが重要になります。

HTML構造に依存している

多くのサイトはデザインが変わることで、HTMLのマークアップも変わるため、HTMLの構造に依存しているJavaScriptやCSSも修正する必要があります。

【例】

『悪い例』
▼HTML

<article>
  <h1>ブログのタイトル</h1>
  <div>
    <p>
     ブログの本文
    </p>
  </div>
</article>

▼CSS

  article h1 {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
}

この場合、仮にHTMLのマークアップが、articleがdivに、h1がh2に変更された時にはCSSのコードに下記のように変更しなくてはなりせん。
▼CSS

  div h2 {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
}

あらかじめ下記のようにclassを使ったマークアップにしていれば、仮に上記のようなマークアップに変更が生じてもCSS側に変更を加える必要がなくなります。

  <article>
    <h1 class="entry-title">ブログのタイトル</h1>
    <div>
      <p>
        ブログの本文
      </p>
    </div>
  </article>

  .entry-title {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
  }

上記の例は極端な例になるとは思いますが、この例よりもさらに深いセレクタを書くこともあると思います。
classを使わないシンプルなマークアップは、決して間違いではないと思いますが、長期運用のプロジェクトでは、これが修正範囲を広めてしまうことの要因になることも考えられます。
今後サイト制作する際には、今回の内容を踏まえながらCSSの設計を行ない、コーディングしていこうと思います。

【引用元書籍】

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