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 さんのフロントエンドに関する話です。
お楽しみに！