CSS設計を意識するようになってから約1年が経過したので、 なぜCSS設計が必要なのか、自分なりの考え（思い）を整理してみます。

CSS設計が生まれた背景

「CSS設計」という言葉が生まれたのは、CSSが他のプログラミング言語に比べて書きやすい分、 それゆえに壊れやすく、過去に多くの人がサイトを作る中でCSSの破綻を目撃してきたことが 背景があります。

5年運用されたサイトのCSSが当初の3倍に膨れ上がっていたり、同じ見た目なのに クラス名が違っていたり、使わなくなったスタイルが残っていたり...とかそういうものです。

CSS設計の表層の部分だけを見ると、「普通に書けばよいのに、なんでこんな回りくどいことをするのか？」と 感じるかもしれません。1年書いた自分でもそう思いますし、回りくどいことをしていることは間違いないのだと思います。

命名規則は名前空間がないCSSでクラス名の重複を防止をするため、分類分けは管理上の都合でそうしているだけで それがCSS設計の目的、本質ではありません。

CSS設計の目的

私がCSS設計を取り入れている目的は大きく以下の3つです。

新規制作時に仕様変更に強い作りにしたい

どれだけデザインを丁寧に作っても最後の最後にデザインの一括調整を 行いたい時、行わないといけない時は出てきます。そんな時にCSS設計が しっかり出来ていると1箇所を調整するだけで全体を一括で修正することができます。

サイト全体のフォーマットの統一感を保証したい

サイトの中で同じ意味合いを持つコンポーネント（見出しやボタンなど）はそのサイトの 中では常に同じ振る舞いであることを保証する必要があります。これは品質面でも そうですし、そうあることでサイトの訪問者が無駄に混乱することなく閲覧がスムーズに行なえます。

サイトの寿命を延ばしたい

サイトは作ったら終わりではありません。大体、3年～5年は運用フェーズで メンテナンスが行われていきます。その中ではコンテンツの追加、変更、削除が 新規構築より早いスピードで何度も行われます。

そのときにも継続してサイト全体のフォーマットの統一感を保証しつつ、 新しいコンテンツをローコストで追加できることがサイト運用を円滑に行うためには必要です。

なるべく運用に入った時に「その場しのぎ」のCSSを書かなくてよくなるように、 コンテンツの追加、変更、削除を行っても壊れにくいCSSにする必要があります。

CSS設計はどこか曖昧

「設計」という言葉を使っているわりにCSS設計はどこか曖昧さが残ります。 どこまでを1コンポーネントとするかという粒度の掴み方が結構経験則に 基づくものではじめは大きすぎたり、小さすぎたりします。

この部分を「これがベスト！」ということはできず、「経験則的にこれがベター」と 言うことが精一杯です。

でもCSS設計を行うことのメリットは大きい

「CSS設計」を意識しながら大規模サイトを何個か作ってきましたが、 やはりメリットは大きいです。

コンポーネントの粒度や命名規則を意識するオーバヘッドはあるものの、 コンポーネントがサイトのどこでも同じように使えること、後々の変更に慌てずに済むことなどの メリットを確かにあると認識しています。

CSS設計を行うコツは何歩も先を見ること

新規構築時に後々くるかもしれない仕様変更を、運用時の改修を、 できれば3年、5年後のリニューアルまでを想定できるとなお良いと思います。

曖昧だけどやる意味はある

今のところの自分の結論はここです。