Help us understand the problem. What is going on with this article?

ECSSをがんばって使ってみた話

More than 1 year has passed since last update.

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のコーディングを進めなければなりませんでした。フロー詳細は以下です。

  1. 仮デザインを元にHTML, CSS, JavaScriptをコーディングする
  2. サーバーサイドのエンジニアに渡しView側の実装をしていただく
  3. 本デザインが完成する
  4. 本デザインを元にCSS, JavaScriptを調整する
  5. サーバーサイドのエンジニアに再度渡す

デザインが確定していないことから、仮デザイン段階で汎用的なコンポーネントベースにコーディングしたとしても本デザインではどうなるのか想定できない(ボタンだと思っていたものがボタンではなくなるなど...)

またその他事情により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 さんのフロントエンドに関する話です。
お楽しみに!

sh02
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした