1. end-wc

    Posted

    end-wc
Changes in title
+Re:ゼロから始めるCSS設計
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,75 @@
+この記事は ウェブクルー Advent Calendar 2019 8日目の記事です。
+昨日は@hiro_moriさんの「古い組織にデザイン思考を浸透させる手順」でした。
+
+#概要
+弊社が運営するwebサービスの大型改修案件に伴い、改めてCSSの管理と設計について学び直したので、そのことにについて書きます。
+~~(内容は概ね[Web制作者のためのCSS設計の教科書](https://book.impress.co.jp/books/1113101128)の要約です)~~
+
+#CSSを管理する上での問題点
+中〜大規模サイトを長期に渡って運用していると、必ずと言っていい程出てくる「CSSが煩雑になる問題」。
+最初は綺麗に整頓された記述でも、後からコンテンツの追加やサイト改修によって膨大な記述&ファイル数になったり、
+似た記述が重複したり、修正によって意図しない箇所に影響が出たり、詳細度が高すぎて、最終奥義「!important」を使わざるをえなくなったり...
+運営期間が長ければ長いサイトほど、担当者はこれらの問題に頭を抱えているのではないかと思います。
+
+(↑の例のイラスト入れたい)
+
+#良いCSS設計とは?
+Googleエンジニアのフィリップ・ウォルトン氏の[CSS Architecture](https://philipwalton.com/articles/css-architecture/)によると、良いCSS設計は下記の通りだそうです。
+####予測しやすい
+→制作者が思ったとおりのイメージになっているか
+→意図しない動き(影響)はないか
+####再利用しやすい
+→汎用的に使えるモジュールやコンポーネント
+→それぞれが独立しており、様々な箇所で使い回すことができる
+####保守しやすい
+→後からルールを追加した際に、既存のルールを壊さない
+####拡張しやすい
+→サイト規模を拡大し、コードが複雑になっていっても追加修正がしやすいか
+
+#目指すべきところ
+上記を踏まえ、理想としては、
+・ユニークでわかりやすい命名規則(他に影響しない)
+・なるべくhtml構造に依存しない
+・どの場所に入れても使いやすい
+・CSSの上書きは最小限に
+・似たパーツは共通化
+
+のような設計にできたら良さそうだなと思いました。
+
+#有名なCSS設計手法
+CSS設計の有名なものとしては下記
+・OOCSS
+・SMACSS
+・BEM
+・MCSS
+などがあり、詳しい説明はドキュメントや記事が多く存在するので割愛しますが
+今回、上記のいいとこ取りをしたFLOCSSを採用しました。
+日本語のドキュメントがあり、採用している企業(webサービス)も多く、検索すると記事が多くあるのも採用理由の1つです。
+
+#FLOCCSの概要
+webページを
+ `Foundation`
+ `Layout`
+ `Object`
+  ┝`Component`
+  ┝`Project`
+  ┗`Utility`
+というレイヤーに分類して管理、記述するという設計手法です。
+SASSを使うことによって、上記と同じようなディレクトリ構造にし、common.scssなどにまとめてコンパイルすることによって、モジュールごとに管理でき、読み込むCSSは1つにすることができます。
+また、オリジナルルールとして、ページ単位の独自のCSSを記述する`Page`というディレクトリとCSSファイルも用意し、原則として、2つのCSSファイルを読み込むという設計にしました(下記参照)
+(図を入れたい)
+なお、改修案件は現在進行中のため、CSSがこれだけ少なくなった、メンテナンス性が上がった、などの結果については今後に期待です。悪しからず。
+
+現時点での肌感としては、導入のための学習コストはそれなりにかかりますし、初期の策定がかなり大変ですが、
+再利用性が高いので、コードを書けば書くほど後から楽になっていくのではないかなと思っています。
+ただ、後々担当者が変わった際に、全体の設計を理解してもらう必要があるかなと感じています。
+
+####提唱者の谷拓樹さんのドキュメント
+[FLOCSS公式ドキュメント](https://github.com/hiloki/flocss)
+[柴犬でもわかるFLOCSS](https://mamehiko.booth.pm/items/1033385)
+[みんなが知らないような知ってるようなFLOCSS](https://hiloki.github.io/s/flocss-layout/)
+
+####参考記事
+[脱・CSS無法地帯。FLOCSSで指針のある設計を。](https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db)
+[FLOCSSを使ってCSSファイルを20,000行から9,000行にした話](https://qiita.com/Atsss/items/4f9d98fb1d0546539c09)
+