CSSは自由に書こうと思えばどこまでも自由に書けてしまうのですが、何も考えずに書いてしまうと後々困ったことになります。

「この部分のスタイルだけ編集したいのに、CSSを書き換えたら全然関係のない部分まで変わってしまった。」というのはよく聞く話ですが、CSSの設計を見直すことでこの問題を解決できるかもしれません。

OOCSS、BEM、SMACSS、FLOCSSなど様々あるCSSの設計手法について、最近調べる機会がありましたので、今回はその考察を書いて見たいと思います。各手法については既に細かく説明している記事がたくさんありますので、この中では詳しく触れません。

CSSに設計が必要な理由

これまで様々な人が書いたCSSを見てきましたが、書き方は本当に人それぞれです。ある程度ルールがあるコードもあれば、全くルールの無いコードに出会うこともしばしば。後者の場合、CSSを書き足すのは至難の技です。

また、ルールがある場合は空気を読んでコードを書き足すことができますが、コードが冗長になったり、書き足していくうちにルールを見失ってしまうこともあります。

やはり、壊れにくく保守性が高いCSSを書くためには、最初の段階で設計が必要になります。そこでOOCSS、BEM、SMACSS、FLOCSSなどの設計手法が登場するわけですが、これらは設計手法というよりは、設計をする際の考え方やちょっとしたTIPSをまとめたアイデア集と捉えた方が理解しやすいと思います。

それを踏まえた上でこれらを使うメリットを考えてみました。

• コンポーネント思考を取り入れることによって、CSSの汚染を防ぐことができる。（すべてではない）
• 設計手法に沿ったネーミングルールを設けることで、CSSから全体の構造をある程度把握することができる。
• CSSの再利用性を高めることによって、コンポーネント（Webサイトの部品）を他のプロジェクトにも流用することができる。
• 基本構造と見た目を分けるという考え方に基づくことで、デザインの修正に柔軟に対応することができる。
• これらの手法は既にドキュメントにまとめられているので、プロジェクトに合わせて手法を選択しドキュメントを用いて学習することで、チーム内でCSS設計の共通認識を持つことができる。（「コーディング始める前にこれ読んでね。」と言うことができる。）

書き出してみると色々ありましたが、最後のメリットが結構大きいかなと思っています。CSSの設計について毎回一から説明するとなるとなかなか大変ですが、先に上げたこれらの手法は既に整備され、ドキュメントも多数用意されていますのでそれらを用いて学習することができます。

その上で、そのプロジェクトに固有の問題やルールなどを話し合って付け足していくという使い方が良さそうです。また、後からプロジェクトに参加する人にもスムーズに設計やルールを伝えることができます。

では逆に、デメリットを上げてみたいと思います。

• 学習コストが掛かる。各手法はお互いに関連している部分も多いので一度全体的に学習しなければならない。
• ComponentやUtilityという概念は抽象的であり、人によって捉え方が異なる。

一番の問題はやはり学習コストが掛かることだと思います。OOCSS、BEM、SMACSS、FLOCSSなどの手法はそれぞれに関連している部分が多く、どれか1つだけ学習すれば良いというわけにはいきません。

また、これらの手法はどれもWebサイトのパーツを部品（コンポーネント）と考えカプセル化してCSSを書く方法を取っていますが、どの程度の粒度で部品分けするかまでは定められていません。人によってコンポーネントの捉え方が異なることは往々にして予想できますので、チーム内で話し合い共通認識を持つことが大切だと思います。

まとめ

CSSはちょっと学習すれば誰でも書くことができるものですが、設計なしにはいとも簡単に崩れてしまいます。せっかく書いたコードを一から書き直しなんてことが起こらないためにも、設計は念入りに行いましょう。

CSS設計を学習するにはWeb制作者のためのCSS設計の教科書がオススメです。