DMM.com #2 Advent Calendar 2017 10日目の記事です。
こんにちは。普段フロントエンド回りのコード書いてます。
最近業務でCSS設計手法の1つであるEnduring CSS(ECSS)を使ってみたので、それについて記事を書きたいと思います。
他カレンダーのURLはコチラ
DMM.com #1 Advent Calendar 2017
ECSSとは?
汎用的なコンポーネントのスタイルを抽象化し組み合わせていくOOCSSとは逆の考え方で、抽象化せずモジュール毎にスタイルを分離させていくアプローチをとります。
ECSSでのモジュールとは汎用的なコンポーネントの区切りではなく、例えばボタン・テキスト・リストを合わせた1つの機能を指します。
具体的には「購入リスト」ページにタイトル・リスト・ページネーションがあったとして3つ合わせて1つのモジュールとなります。また「購入リスト」にデザインが近い「お気に入りリスト」ページがあったとしても「購入リスト」と「お気に入りリスト」のタイトル・リスト・ページネーションは共通のモジュールとしてみなしません、別々にスタイルを記述します。
※このあたりのモジュールの定義はデザインや状況によって変わる可能性はあります...
別々にスタイルを記述するため重複しCSSのファイルサイズが大きくなるのですが、
影響範囲が分離されており、「お気に入りリスト」のみのCSS修正で「購入リスト」に影響することはありません。
影響範囲で頭を悩ませることなく、すばやく修正ができ、長く生きるCSSを記述することができます。
もっと詳しい説明はこちらから
公式：http://ecss.io/
CodeGrid：https://app.codegrid.net/entry/2016-ecss-1
選定理由
正直あまり人気な設計手法ではないと思います...DMM内でもECSSを採用した話は一切聞きません。
仮に新規開発でページ内デザインが共通化されているならば、細かいパーツからスタイルを組み立てていく設計手法（FLOCSS, APBCSS等）を使った方がよいと思います。
ただ自分が担当している案件が特殊で、デザインが完成していない状態でHTML, CSS, JavaScriptのコーディングを進めなければなりませんでした。フロー詳細は以下です。
- 仮デザインを元にHTML, CSS, JavaScriptをコーディングする
- サーバーサイドのエンジニアに渡しView側の実装をしていただく
- 本デザインが完成する
- 本デザインを元にCSS, JavaScriptを調整する
- サーバーサイドのエンジニアに再度渡す
デザインが確定していないことから、仮デザイン段階で汎用的なコンポーネントベースにコーディングしたとしても本デザインではどうなるのか想定できない（ボタンだと思っていたものがボタンではなくなるなど...）
またその他事情により4 ~ 5にかけてあまりHTMLを修正できないかもしれないという制約を抱えており、FLOCSS, APBCSSでは柔軟に対応することが難しいと判断しました。
そのため、分離したモジュール毎にスタイルを柔軟に調整できるECSSを採用しました。
コーディングするにあたって気を付けたこと
デザインが確定していない、またHTMLを調整できないかもという特殊な状況だったので、以下のことを気を付けました。
namespace sw は使用しない
ECSSでは汎用的なコンポーネントを禁止しているわけではありません。
作成する際は sw(SiteWide) namespaceを使用するルールとなっていますが、今回は仮デザインから本デザインでの汎用的なコンポーネントを読み取ることが困難だったため使用しません。
mixinを使いすぎない
こちらも禁止されている訳ではないのですが、ECSSでは分離すること・複雑にしないことを前提にしているため、使いすぎないよう注意しました。
ただ仮デザインでの汎用的なコンポーネントはスタイルの記述が面倒だったため、mixinを使用しました。
もし本デザインが汎用的なものでなかった場合はincludeを削除したいと思っています。
namespaceは省略しない
公式サイトやCodegridの記事では、namespaceを多用するため省略していましたが（shopping cart => sc）
namespaceが10 ~ 20となり、何を示しているのかわかりずらくなったため省略はしていません。
（HTMLの記述がかなり面倒になってしまったので、これはよくないかも...）
おわりに
ECSSはページ毎のデザインがうまく共通化されていない、また自分と同じようにデザインよりコーディングを先行しないといけない状況（いないかもしれませんが...）の人はこの設計手法がうまく当てはまるかもしれません。
現状、フローの2 ~ 3にあたるため、ECSSを選んで正解だったかはまだ結果が出ていません。
結果はまた別途記事を書きたいと思います！
明日は @ma9to さんのフロントエンドに関する話です。
お楽しみに！