ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

知っておきたいCSS設計法

カテゴリー
HTML/CSS
CSS設計
全8回

OOCSS、BEM、SMACSS(スマックス)という3つのCSS設計概念の概要を解説します。これらの概念はHTML+CSSのテンプレートページ設計のために、ぜひとも知っておきたい概念です。 第1回を読む

第1回 OOCSSの基本

HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か? 今回はその考え方の基本をまずおさえましょう。

第2回 ストラクチャとスキン

OOCSSの設計概念のひとつ、モジュールの関係を「ストラクチャ」と「スキン」で整理するという考え方を解説します。単純な構造のサンプルを使って説明しますので、概念をしっかりおさえましょう。

第3回 複雑なストラクチャとスキン

OOCSSにおける重要な概念「ストラクチャ」と「スキン」を、少し複雑な設計をサンプルとして解説します。モジュールの粒度や、ストラクチャとスキンの切り分けの参考にしてください。

第4回 BEMの基本

HTMLテンプレート設計法のひとつ、BEMを解説します。BEMはJavaScriptなども含む、包括的な設計の方法論ですが、記事では、主にHTMLとCSSの設計概念にフォーカスします。

第5回 BEMを用いた設計 1

前回解説したBEMの概念を使って、具体的にどのようにHTMLとCSSのコードに落とし込んでいくのか解説します。BEM独特のクラス属性値の書き方についても触れています。

第6回 BEMを用いた設計 2

BEMを用いたHTMLテンプレート設計を、少し複雑なサンプルを元に解説します。また、OOCSSやBEMを比較し、それぞれの方法論をどのように取り入れていくか考察します。

第7回 SMACSSのルール 1

HTMLとCSSの設計思想のひとつSMACSSについて解説します。SMACSSはCSSのルールを5つに分けて考えます。今回はそのうち、ベースルールと、レイアウトルールの解説を行います。

最終回 SMACSSのルール 2

シリーズ最終回では、SMACSSのモジュール、状態、テーマの3つのルールを解説するとともに、これまで解説したOOCSS、BEMとの関連性も考えます。日頃の業務に取り入れるヒントになるでしょう。