Enduring CSS(ECSS)とは
CSSの設計手法の1つです。
CSS設計手法では一番良さそう
これを読んでCSSの設計手法について考えました。
どれもメリットデメリットあるけどしっくり来ないなぁと思ってみてたのですが、 ECSSのところを見たときに、これだと思いました。
理由の1つは、CSSは共通化しないといけないという思い込みを捨ててくれたことです。 仕事でCSSを書いていると、どうしても影響範囲に気を使います。 なので共通化せずに管理することも多いのですが、どうしても罪悪感が残りました。 ECSSは「それでいいのだ」という感じで、安心しました。
もう一つは、ECSSについて興味が出てきて、 この記事を読んでみたときのことです。
以下の2つの記述でピンと来ました。 ECSSはCSSにおけるDDDの立ち位置だなと。 まずは、CSSのクラス名をプログラミングのクラスに例えた場所。
ほか、ModuleとChildNodeはアッパーキャメルケースで記述します。 これは、多くのプログラミング言語で、クラスの宣言は大文字からはじめ、 そこからインスタンスを作成することになぞらえ、 HTMLにおけるこのクラス属性に指定するこの文字列は、 具体的なUIを表現するための雛形であるという考えのもと、 アッパーキャメルケースで記述することにしたそうです。
また、「どのように表示するか」ではなく、「それは何か」で命名している点が、 DDDっぽいです。
また、このModuleの名称がBenefitsという、 具体的な機能を示すという点についてもECSSらしいと言えそうです。
variant
もう一つ気に入ったのが、variantの表現方法です。
よく使われるのがclass="xxx xxx-yyy"みたいに2つ並べる方法ですが、
どうもこの記法は冗長で好きではないです。
自分は真っ先にdata-属性を使う方法を思いついたのですが(これも広く使われているようです)、
それよりよい方法を提供していました。それは、WAI-ARIA属性を使用する方法です。
まあ、WAI-ARIAはこれから勉強する必要があるのですが、 これで逆に、勉強する動機ができました。