本シリーズについて

こちらの「CSS設計について整理してみる」シリーズは、完結できるかわかりませんが、少しずつ進められたらと思っております！（私個人の備忘録的な内容です）

内容は、「CSS設計完全ガイド（半田惇志著）」の内容をもとに執筆させていただいております！（詳細や、筆者が伝えたい正確な内容については書籍を読んでいただけるとよいかと思います。）

では参りましょう。

なぜCSS設計が必要なのか

HTMLやXMLでの文書構造の中にスタイリングが当てられており、文書（HTMLやXML）とスタイルが混在しているのは、好ましくなく、また管理も大変であるということからCSSが提唱されたそうです。

例）CSSが使用される前の例

<font size="4" color="red">こちらはCSSが使用される前のスタイルの当て方です。</font>

このようなスタイルをあてると、スタイルを変更したい際には一つずつ修正する必要があるので大変ですよね...

今となっては、

p {
    font-size: 18px;
}

と指定すれば読み込んでいるすべてのページでこのスタイルが適用されるので、便利というわけです。

しかし、便利なCSSですが「グローバルスコープ」という点に大きな問題があります。

グローバルスコープについて

グローバルスコープとは、どの位置からもアクセス可能な範囲のことをいいます。
つまり、ファイルを分けたからといってスタイルが独立するのではなく、互いに干渉し合う可能性があるわけです。

そうなると小規模なサイトなどではあまり問題にならないですが、大規模なサイトや、今後ページ数が増えた場合に、スタイルの打ち消しなどをする必要が出てきたりしてしまいます。

開発を始める前にきちんと設計をしておかないと、上記の問題以外に加え、管理が大変になっていくということです。

CSS設計がきちんとされていない場合、一つの小さな修正をしたいだけのはずなのに、他のページへの影響範囲も考えて慎重にやらなければいけない状態にもなりかねません😣

※CMSから吐き出される独自のクラス名などを優先的にスタイルを当てる必要があるので、そういう場合は臨機応変な対応が求められる。

また、余談ですがCSSセレクターの当て方によっても読み込み速度に影響が出るそうなので、そういう意味でもCSS設計は重要と言えます。

CSSは非常に便利な一方で、その便利さが大きな弱点でもあるということになってしまったようです（泣）
そこで、登場したのがCSS設計というわけです！

CSS設計の共通事項

CSS設計には様々なものがありますが、それぞれに共通して言えることは、

抽象化する
分ける

の２点だといいます。

「抽象化」とは共通できる部分はないかとひとつにまとめる作業のことで、「分ける」はファイルや役割、名前などを分ける作業をいいます。

今回のまとめ

CSSが提唱された当初はそこまで想定されていなかった便利さが、Webページの複雑化によってデメリットとなってしまい、それを克服するためにCSS設計が誕生したということでした。
そして、CSS設計には様々なものがありますが、それぞれに共通するものとして、抽象化すると分けるの２つがあるということでした。

参考図書