設計
知っておきたいHTMLテンプレート設計法
8

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア