最終回 SMACSSのルール 2
シリーズ最終回では、SMACSSのモジュール、状態、テーマの3つのルールを解説するとともに、これまで解説したOOCSS、BEMとの関連性も考えます。日頃の業務に取り入れるヒントになるでしょう。
第7回 SMACSSのルール 1
HTMLとCSSの設計思想のひとつSMACSSについて解説します。SMACSSはCSSのルールを5つに分けて考えます。今回はそのうち、ベースルールと、レイアウトルールの解説を行います。
第6回 BEMを用いた設計 2
BEMを用いたHTMLテンプレート設計を、少し複雑なサンプルを元に解説します。また、OOCSSやBEMを比較し、それぞれの方法論をどのように取り入れていくか考察します。
第5回 BEMを用いた設計 1
前回解説したBEMの概念を使って、具体的にどのようにHTMLとCSSのコードに落とし込んでいくのか解説します。BEM独特のクラス属性値の書き方についても触れています。
第4回 BEMの基本
HTMLテンプレート設計法のひとつ、BEMを解説します。BEMはJavaScriptなども含む、包括的な設計の方法論ですが、記事では、主にHTMLとCSSの設計概念にフォーカスします。
第3回 複雑なストラクチャとスキン
OOCSSにおける重要な概念「ストラクチャ」と「スキン」を、少し複雑な設計をサンプルとして解説します。モジュールの粒度や、ストラクチャとスキンの切り分けの参考にしてください。
第2回 ストラクチャとスキン
OOCSSの設計概念のひとつ、モジュールの関係を「ストラクチャ」と「スキン」で整理するという考え方を解説します。単純な構造のサンプルを使って説明しますので、概念をしっかりおさえましょう。
第1回 OOCSSの基本
HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。