この記事は ウェブクルー Advent Calendar 2019 8日目の記事です。
昨日は@hiro_moriさんの「古い組織にデザイン思考を浸透させる手順」でした。

概要

弊社が運営するwebサービスの大型改修案件に伴い、改めてCSSの管理と設計について学び直したので、そのことについて書きます。
(内容は概ねWeb制作者のためのCSS設計の教科書の要約です）

CSSを管理する上での問題点

中〜大規模サイトを長期に渡って運用していると、必ずと言っていい程出てくる「CSSが煩雑になる問題」。
最初は綺麗に整頓された記述でも、後からコンテンツの追加やサイト改修によって膨大な記述&ファイル数になったり、
似た記述が重複したり、修正によって意図しない箇所に影響が出たり、詳細度が高すぎて、最終奥義「！important」を使わざるをえなくなったり...
運営期間が長ければ長いサイトほど、担当者はこれらの問題に頭を抱えているのではないかと思います。

良いCSS設計とは？

Googleエンジニアのフィリップ・ウォルトン氏のCSS Architectureによると、良いCSS設計は下記の通りだそうです。

予測しやすい

→制作者が思ったとおりのイメージ(表示)になっているか
→意図しない動き(影響)はないか

再利用しやすい

→汎用的に使えるモジュールやコンポーネント
→それぞれが独立しており、様々な箇所で使い回すことができる

保守しやすい

→後から機能を追加した際に、既存のルールを壊さない

拡張しやすい

→サイト規模を拡大し、コードが複雑になっても追加修正がしやすいか
→(サイト規模が増える=担当者が増える)修正者が増えても、メンテナンスしやすいかどうか

目指すべきところ

上記を踏まえ、理想としては、
・ユニークでわかりやすい命名規則（他に影響しない）
・なるべくhtml構造に依存しない
・どの場所に入れても使いやすい
・CSSの上書きは最小限に
・似たパーツは共通化

のような設計にできたら良さそうだなと思いました。

有名なCSS設計手法

CSS設計の有名なものとしては下記
・OOCSS
・SMACSS
・BEM
・MCSS
などがあり、詳しい説明はドキュメントや記事が多く存在するので割愛しますが
今回、上記のいいとこ取りをしたFLOCSSを採用しました。
（FLOCSSの手法を取り入れることで、上記目指すべきところ、がある程度叶いそうな感じがしました）
日本語のドキュメントがあり、採用している企業(webサービス)も多く、検索すると記事が多くあるのも採用理由の１つです。

FLOCCSの概要

webページを
Foundation
Layout
Object
　┝Component
　┝Project
　┗Utility
というレイヤーに分類して管理、記述するという設計手法です。
SASSを使うことによって、上記と同じようなディレクトリ構造にし、common.scssなどにまとめてコンパイルすることによって、モジュールごとに管理でき、読み込むCSSは１つにすることができます。
また、オリジナルルールとして、ページ単位の独自のCSSを記述するPageというディレクトリとCSSファイルも用意し、原則として、２つのCSSファイルを読み込むという設計にしました（下記参照）

なお、改修案件は現在進行中のため、CSSがこれだけ少なくなった、メンテナンス性が上がった、などの結果については今後に期待です。悪しからず。

現時点での肌感としては、導入のための学習コストはそれなりにかかりますし、初期の策定がかなり大変ですが、
再利用性が高いので、コードを書けば書くほど後から楽になっていくのではないかなと思っています。
ただ、後々担当者が変わった際に、全体の設計を理解してもらう必要があるかなと感じています。

提唱者の谷拓樹さんのドキュメント

FLOCSS公式ドキュメント
柴犬でもわかるFLOCSS
みんなが知らないような知ってるようなFLOCSS

参考記事

各CSS設計手法を取り入れる上でのメリット・デメリットをまとめてみた
CSS設計を勉強するならまずこれを見たら良いかも
脱・CSS無法地帯。FLOCSSで指針のある設計を。
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話
FLOCSSを使ったCSS設計での悩みどころと解決案
【CSS設計】メイクアップなマークアップ♡FLOCSSでどんなときでもキレイにきまるコーディング術!
CSS設計の目的とFLOCSSの概要 – FLOCSSで始めるCSS設計

明日は @wchikarusatoさんです。よろしくお願いいたします！