年々CSSに関するツールや設計方法（方法論）は増えています。便利になったと言えばそうなのですが、その反面これから新しい方法論を導入しようという方にとってはどこから手をつけていいのか困惑することもあるかもしれませんね。
そこで本稿ではケースごとに「どのCSS方法論が適しているのか」を考えていきます。自身のフロントエンド開発環境に近いものを参考にしてみてください。
ケースで考えるCSSの各方法論
■ケース1
「シングルページやシンプルなウェブサイトを作りたいです。コンテンツはテキストだけで、1つか2つのフォームがあるようなものです。共同作業者はいなくて、開発者は私（と飼い猫）だけです」
とにかくシンプルにし、クラスを使わずに直接HTML要素を配置しましょう。カスケードを利用し、スタイルを継承させます。サイトが大きくなった場合、OOCSSやユーティリティクラスの使用を考えるのもいいでしょう。
■ケース2
「中くらいのサイズのチームです。私たちのプロジェクトは少し複雑で、複数の人々が同時に同じ作業を行うことがあります」
BEM、SUIT、SMACSS、ITCSS、Enduring CSSなどを用いましょう。命名規則により、他の人の作業を邪魔することを防ぐことができます。採用する前にいくつか試してみるのも良いでしょう。
■ケース3
「大企業でたくさんのチームがあります。私たちのプロジェクトは大きく、複雑です。何が起こっているのかを把握し続けることは難しいです。作業中に他のチームの担当箇所を壊すことを避けねばなりません」
JSX、JSS（またはは似たようなCSS in JSライブラリ）を用いましょう。CSSとHTML／JSとの繋がりを確実にしておけば、他の箇所に影響を与えることなく変更や削除ができます。Atomic CSSとACSSも見てみてください。他のアプローチからこの問題を解決しようとしたものです。
■ケース4
「プロトタイプから始めたいです」
TACHYONSやBASSCSSといった単一クラスのアプローチをするライブラリを用いましょう。HTMLとCSSを同じタイミング、同じ個所で記述することができます。
■ケース5
「私たちのプロジェクトは多くの階層があり、実行中に多くのアップデートが必要になります」
CSS in JSライブラリを用いましょう。プロパティのアップデートは直接JSから行うことができます。
■ケース6
「CSSフレームワークをリリースしたいです」
BEMを名前空間と共に用いましょう。そうすれば保護することもカスタマイズも可能です。
■ケース7
「（カスタマイズ不可である）サードパーティ・ウィジェットを作りたいです」
CSS Modulesを用いましょう。ユニークなクラスが、スタイルが漏れるのを防いでくれます。
■ケース8
「CodePen上にデモを作りたいです」
新しい方法論を用いましょう。慣れていないことに挑戦するチャンスです。
■ケース9
「同僚が嫌いです」
連鎖的なクラスを用いましょう。例えば「.header > ul.nav li .button {}」のようなものです。これであなたの同僚は苦しむことになるでしょう。
まとめ
ご覧のようにCSSの方法論は多岐に渡ります。そのため方法論に関する議論も互いに同レベルの知識がないとなかなか成立しない面もあります。
上記のケースから自身の環境にあった方法論を選んでみてはいかがでしょうか。
（※本稿は「When to use which CSS methodology」を翻訳・再編集したものです）
おすすめ新着記事
おすすめタグ