HTMLを覚えて3周年経ちました、@sueshinです。
3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。
お手柔らかにお願いしますmm
私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。
トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。
そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。
現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。
ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、
見渡してCSS設計を学習できるようにざっくりまとめて見ました。
CSS設計のゴール
何事もゴールを決めないことには走れないですよね。
「CSS Architecture」(日本語訳)という記事で紹介されていた、
以下の4つの定義は多くのCSS設計でも参考にされている概念です。
- 再利用性
- 拡張性
- 保守性
- 予測性
実際には他の言語でも、上記の条件を満たすコードは良いコードと言われていて、
CSSもこの条件に当てはまると思います。
CSS設計の源流
源流と言っても古臭いとか悪い意味ではないですww
多くのCSS設計に影響を与えているという意味で、CSS設計の歴史や流れを理解する上で以下の3つは外せない考え方だと思います。
OOCSS
OOCSSはレゴのようにCSSを記述しようという、CSSにオブジェクト指向を取り込んだアプローチです。
特に有名なのは
- 見た目と構造の分離(width等の構造とcolor等の見た目を分けてクラスを定義すること)
- コンテナと内容の分離(HTMLとCSSを疎結合にすること)
でしょうか。
CSSフレームワークではBootstrapがOOCSSの概念を用いて設計されているので参考になると思います。
SMACSS
SMACSSではOOCSSを実用するにあたり具体的な提案をしていて、
CSSを
- ベース
- レイアウト
- モジュール
- 状態
- テーマ
の5つのカテゴリに分類しています。
カテゴリでディレクトリを分け、それぞれに適した命名記法を提案しています。
少し古いですが、CSSフレームワークのPure.cssがSMACSSで設計されています。
BEM
BEMはOOCSSやSMACSSとは少し毛並みが違い、ロシアのYandexという企業が定義したCSSの命名概念です。
クラス名を考える際に、デザインコンポーネントをblock、element、modifierと3つに分けて命名することで、他のCSS開発者にとってもわかりやすくなります。
個人的な感覚だと、BEMを改良したMindBEMdingがより有名かもです。
デザインをCSSにする上で知っておきたい
ビジュアルデザインの手法として、最近よく話題になっていますね。
たとえ運用するサイトがアトミックデザインでなくても、デザインをコンポーネントに落とし込む際に参考になると思います。
アトミックデザインではデザイン(例えば、見出しとそれを包含するモーダル)をそれぞれ原子(ATOMS)と分子(MOLECULES)に分けて考えることを提案しています。
原子と分子でコンポーネントを分けて定義することで、汎用性が高まることかと思います。
最近私の周りでもCSSの話の中で照れながらmoleculesが〜といった声を聞くようになりましたww
著名なモダンCSS設計
これらはPhotoshopのlayerのような概念を取り入れた、比較的モダンなCSS設計です。
layerの概念を取り入れることで、詳細度をコントロールしようというアプローチです。
!importantを一度使用すると、それを上書きしようと更に同一箇所を!importantで上書きされ、結果として管理不能にCSSコードが陥ることを詳細度戦争と言われます。
上記3つの設計手法はCSSディレクトリをlayerで分けて考え、セレクタの上書き(.foo > .bar)を上のlayerに向けてのみ許容することで、詳細度を管理しようとする手法です。
ジョブセンスリンクへの導入はこれからですが、個人的にはFLOCSSを導入できたらいいなと思っています。