【初心者向け】CSS設計の基本を
おさらい

みなさんこんにちは。コーダーのモリシタです。

LPや小規模サイトで単純に書くだけのCSSは簡単ですが、中規模以上のWebサイトになり、かつ運用期間が長く更新も頻繁に発生する場合、自分流のCSSでは管理するのが大変になっていきます。
そのため誰が見ても分かやすく、管理しやすいコードを記述していくことは、その後の作業効率にも大きく関わってきます。

そこで今回は、分かりやすく管理しやすいコーディング手法である「CSS設計」の概要について簡単に紹介していきます！

CSS設計とは

CSS設計とは、CSSの作業効率やメンテナンス性を上げるための、HTMLのクラス名の規則と、CSSのコード管理方法の考え方のことです。

CSS設計で目指すゴールとしては、
・予測できる
・再利用できる
・保守できる
・拡張できる
の4つです。

それぞれを簡単に解説すると、

・予測できる
「スタイルが期待通りに振る舞うかどうか」「スタイルの影響範囲が予測できるか」を考え、新しいスタイリングを追加する、また既存のスタイリングを更新しても、自分の意図しない箇所に影響を与えないように設計されているべき。

・再利用できる
ページ内にある部品を、別のところでも使いたいときに、コードをいちいち書き直したり上書きする手間がない状態が「再利用できる」状態。

・保守できる
新しい内容を追加したり、あるいは配置を変えたりなどを行っても、既存のCSSを書き換える必要がない状態のこと。

・拡張できる
規模が大きくなり複数人数のチームで作るときでも、問題なく管理できるコード

もし上記点を何も意識しないでCSSを書いていくと

・改修がめんどうになる
・重複する記述が増え、コードが肥大化
・どこになんのスタイルが記述されているかわからなくなる
などの問題が発生するため、大規模になるほどCSS設計の考え方が大切になっていきます。

CSS設計の各ゴールを実現するために気をつけるべき8つの考え方も提示されています。

1.特性に応じてCSSを分類する
2.コンテンツとスタイリングが疎結合である
3.影響範囲がみだりに広すぎない
4.特定のコンテキストにみだりに依存していない
5.詳細度がみだりに高くない
6.クラス名から影響範囲が想像できる
7.クラス名から見た目・機能・役割が想像できる
8.拡張しやすい

詳しくは割愛しますが、これだけのことを意識するのはとても大変そうですね。。

さまざまなCSS設計手法

・OOCSS
・SMACSS
・MCSS
・FLOCSS
・BEM　　等
さまざまな設計手法があり、会社や人によって好みは分かれるようです。
ちなみに僕は初心者でも分かりやすい「BEM」を使って制作を行っています！

オススメの書籍紹介

CSS設計が学べるオススメな書籍があります。

「CSS設計完全ガイド」

この本は定番中の定番で、これまでご紹介してきた「CSS設計とは何か」という概念的なところから、各CSS設計手法についてコードも交えた具体的な説明まで、詳しく解説されています。
分厚い本ではありますが、教科書的な位置づけとしても買うことをオススメします！

まとめ

今回は、CSS設計の基本的な解説をしていきました。
僕自身もまだまだなので、誰もが分かりやすく、綺麗なコードを書けるように意識していきたいと思います。
次回の僕の記事では、CSS設計手法の中でも特に人気な「BEM」の記法について紹介してきます。
お楽しみに！