12周年記念パーティ開催! 2024/5/10(金) 19:00

Enduring CSSの設計思想

全4回

このシリーズでは、Ben Frain氏によって著されたCSS設計方法、Enduring CSS(ECSS)について解説します。これまでのOOCSS、SMACSS、BEMと比較しながら、その考え方を理解しましょう。

最終回 ECSSからCSS設計を考える

前回まででECSSの基本的な概念の解説を行いました。本シリーズの最終回となる今回は、ECSSのさまざまなトピックを取り上げます。これらを通じて、ECSS本著者がどのようにCSSを設計したらいいと考えているかの一端を知ることができます。

第3回 モジュール内の構造の考え方

ECSSではページの内容を「モジュール」に分け、モジュールを「名前空間」でまとめます。では、具体的にモジュールはどのようにHTMLとCSSで表現されるのでしょうか。ECSS公式サイトの構造を例に考えてみます。

第2回 「名前空間」と「モジュール」

ECSSは「分けて考える」という思想であることを前回解説しました。そのためには、具体的にはどのようなアプローチを用いているのでしょうか。実際のECSSのWebサイトを元に、「名前空間」と「モジュール」について解説します。

第1回 ECSSが目指す設計

CSS設計方法、Enduring CSS(ECSS)は、複雑さを排除し、ある程度のCSS容量増加を覚悟することで、CSSの寿命を伸ばすというアプローチを取っています。今回は、その基本となっている考え方から解説します。