MENU

【初心者向け】CSSの設計手法を学びたい方へ 各設計手法のドキュメント一覧とざっくり解説

Web制作メモ

CSSの初歩をある程度学んだ方が次に学びたいのはCSSの設計手法だと思います。
どんな風に書けば一番効率が良いのか？
なんとなく書いているがこれであっているのか？など、
様々な疑問がでているのではないでしょうか。

そんなときは、もうすでに世にあるベストプラクティスを考えた先人達の設計手法を参考にしましょう。

設計手法にはにはOOCSS、SMACSS、BEM、FLOCSS、tailwindcssなど様々ありますが、この記事では、まず学ぶ時に必要なドキュメントはどこにあるのか？といくつかの設計手法について特徴を簡単をまとめました。

どれもページ数が数十ページあるなどの中規模以上なサイトを作るときには、必要な考え方になる、再利用可能であること、他の人がみてもわかりやすく作られている、拡張のしやすさなどを追求されたものです。

各CSS設計のドキュメント一覧

各CSS設計のドキュメントは以下です。
※本記事に間違いなどがありましたらお問い合わせよりご意見いただけますと嬉しいです。

OOCSS（オーオーシーエスエス）https://github.com/stubbornella/oocss/wiki
SMACSS（スマックス）https://smacss.com/ja/
BEM（ベム）https://en.bem.info/methodology/
FLOCSS（フロックス）https://github.com/hiloki/flocss
Tailwind CSS（テールウィンド シーエスエス）https://tailwindcss.com/

各CSS設計についてざっくり解説

目次

OOCSS

OOCSS（オーオーシーエスエス）はObject-Oriented CSSの略で、オブジェクト指向CSSという意味です。

米Yahoo!のニコール・サリバンさんという女性のWeb開発者の方が考えました。

CSSを頻繁に再利用して、レゴブロックのように組み合わせできるような部品を作って、最小限のCSSを記載することでパフォーマンスをあげることがメリットの１つです。

OOCSSの基本的な考え方は以下の二つの主要な原則です。

1. 構造とスキンの分離

例えば色違いのボタンがあったら、それぞれのボタンを何度も指定するのではなく、構造を表すものと見た目を表すスキンにあたる部分を分けて指定するという考え方です。

CSSの例

.button {
  padding: 10px 20px;
  font-size: 16px;
}
.button-primary {
  background-color: blue;
  color: white;
}
.button-secondary {
  background-color: grey;
  color: black;
}

2. コンテナとコンテンツの分離

この原則はコンポーネントをその配置する場所（コンテナ）に依存せずにどこでも再利用可能にすることを目指しています。

例えば以下のようなコンテンツに依存するようなスタイルは書かないという考え方です。

/* コンテナに依存するスタイル */
#main .button {
・・・
}

/* コンテナに依存しないスタイルの書き方をする */
.button {
・・・
}

まとめ

OOCSSはCSS設計の基本的な考え方ではありますが、どうも詳しいガイドラインがあるわけではないようです。ただこれから説明する他のCSS設計に少なからず影響を与えた重要な考え方の原則だと考えるのが良いのかなと思いました。

参考サイト

stubbornella/oocss Wiki · GitHub
https://github.com/stubbornella/oocss/wiki

知っておきたいCSS設計法 | 第1回 OOCSSの基本
https://www.codegrid.net/articles/2014-css-template-1/

SMACSS

SMACSS（スマックス）は、Scalable and Modular Architecture for CSSの略です。
Scalabeleを訳すと 拡張性がある、
Modularは 構成要素を組み合わせたもの です。
その2つを持つCSS設計という意味ですね。

こちらも元・米Yahoo!の方、ジョナサン・スヌークさんというのWeb開発者の方が提唱したものです。

前述のOOCSSにも影響を受けている考え方のようです。

SMACSSではCSSのルールを以下5つのカテゴリに分類します。

  1. ベース
  2. レイアウト
  3. モジュール
  4. 状態（ステート）
  5. テーマ

ベース（基本ルール）

基本スタイルの例のように基本的なHTML要素に対するスタイルと、CSSのリセットもベースに含まれます。

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

レイアウト

大枠のレイアウトを定義するスタイルです。
1つ以上のモジュールが入ります。
レイアウトに関連するスタイルは、プレフィックスとして.l-や.layout-を用いることが推奨されます。

#header {
・・・
}
#footer {
・・・
}
.l-grid {
・・・
}

モジュール

ナビゲーション バー、カルーセル、ダイアログ、ウィジェットなど再利用可能なパーツです。
モジュールは独立していて、どのレイアウト内にも配置できるように設計されます。

モジュールのルールセットを定義する際には、IDや要素セレクタの使用を避け、クラス名のみを使用することが推奨されます。

クラスの命名例

<div class="card">
<h2 class="card-title">モジュールのタイトル</h2>
<span class="card-description">説明文</span>
</div>

状態（ステート）

状態とは、他のすべてのスタイルを拡張およびオーバーライドするもので、以下２つの特徴を持っています。

  1. 状態スタイルはレイアウト スタイルやモジュール スタイルに適用できます。
  2. 状態スタイルは JavaScript の依存関係を示します。
.tab {
  background-color: purple;
  color: white;
}

.is-tab-active {
  background-color: white;
  color: black;
}

テーマ

サイトやアプリケーションの外観を変更するためのスタイルです。
使用しない場合もあります。

参考にサイト

CSS のスケーラブルなモジュール式アーキテクチャ
https://smacss.com/

SMACSSによるCSSの設計 | 前編 ベースとレイアウト
https://www.codegrid.net/articles/smacss-1/

css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) ｜ ノースディテール
https://www.northdetail.co.jp/blog/1953/#smacss

BEM

BEM（ベム）はBlock、Element、Modifierの略です。
ロシアの検索エンジン・ポータルサイトを運営する会社、Yandexが提唱しました。

BEMは再利用性があり、構造が理解しやすく、ブロック スタイルはページ上の他の要素に依存しないため、カスケードによる問題が発生するはないという利点があります。

BEMを構成する３つの要素と役割はそれぞれ以下です。

  • Block：再利用可能な機能的な独立したコンポーネントを指します。例えば、ヘッダー、コンテナ、メニューなどがこれに該当します。
  • Element：ブロック内の構成要素で、ブロックに依存して意味を持ちます。例えば、メニューの各項目などがこれに該当します。
  • Modifier：装飾子という意味。ブロックやエレメントの外観、動作、状態を変更するために使用するフラグ。例えば、色の違い、サイズの違いなどがこれに該当します。

命名規則

BEMの命名規則は以下の通りです:

  • ブロック名__エレメント名–モディファイア名
  • ブロック名とエレメント名の間は2つのアンダースコア（__）で区切ります。
  • エレメント名とモディファイア名の間は2つのハイフン（–）で区切ります。

例

<div class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">ホーム</li>
    <li class="menu__item">ニュース</li>
    <li class="menu__item">コンタクト</li>
  </ul>
</div>

この例では、menuがブロック、menu__listとmenu__itemがエレメント、menu__item--activeがモディファイアです。BEMを使用することで、HTMLの構造がCSSのクラス名から直感的に理解でき、スタイルの変更や追加が容易になります。また、BEMはCSSのスコープや特異性の問題を回避するのにも役立ちます。

参考サイト

BEM — Block Element Modifier
https://getbem.com/

bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja · GitHub
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md

FLOCSS

FLOCSS（フロックス）は日本人の方で谷拓樹さんが提唱したCSSの設計手法です。
Foundation Layout Object CSSの略です。

公式のドキュメントが日本語なのが嬉しいですね。
公式のドキュメントをそのまま引用すると、FLOCSSの説明は以下と書いてあります。

OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。
MCSSのレイヤー構成にも大きな影響を受けています。

https://github.com/hiloki/flocss

基本原則

基本原則としては、3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。

  1. Foundation – reset/normalize/base…
  2. Layout – header/main/sidebar/footer…
  3. Object
    1. Component – grid/button/form/media…
    2. Project – articles/ranking/promo…
    3. Utility – clearfix/display/margin…

命名規則

こちらもそのまま引用させていただきますが、LayoutとObjectについて以下の接頭辞をつけることを推奨しています。

基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。

https://github.com/hiloki/flocss

Objectの構成要素にも以下の接頭辞をつけることを推奨しています。

  • Component – .c-*
  • Project – .p-*
  • Utility – .u-*

Tailwind CSS

Tailwind CSSはCSSの設計というより、フレームワークの１つになりますが、非常に人気のあるフレームワークということで、取り上げたいと思います。

ユーティリティーファーストというアプローチを採用しています。
ユーティリティーファーストというのは実際にコードを見るとわかりやすいと思います。

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>

こんな風にCSSの最後の調整用に使われるヘルパークラスだけで作り上げていく方法だと思っています。

HTMLだけでレスポンシブデザインまで完結するので、慣れると早いのでしょうか。
いつか習得してみたいものです。

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.
https://tailwindcss.com/

まとめ

どの方法が良いかはプロジェクトによって適切なものを、何度も実際に自分で色々と試したうえで決めるのが良いと思います。

簡単にまとめるくらいにしようと書き始めたものの、調べれば調べるほど奥深いCSS設計。他にもPRECSS、MCSS、ITCSSなど色々な方法論があるので、またそれぞれについてもっと詳しい記事を書いたり、他の方法論も調べて追記していきたいと思います。

CSS設計のおすすめ書籍

CSS設計完全ガイド ~詳細解説+実践的モジュール集 | 半田 惇志 |本 | 通販 | Amazon

Amazon.co.jp: ざっくりつかむ　CSS設計 eBook : 高津戸 壮: Kindleストア

※このサイトはアフィリエイトプログラムを利用しております
※AIが書いた記事があります

Web制作メモ

関連記事

目次