CSS設計とは、ウェブサイトやアプリケーションのスタイルを
効率的に管理・運用するための方法論や設計手法を指します。
特に、規模が大きくなるほど、
スタイルの管理が難しくなるため、CSS設計は非常に重要です
今回はそんなCSSの設計手法についてまとめていきます。
OOCSS (Object-Oriented CSS)
OOCSSはオブジェクト指向の考え方をCSSに適用した設計手法です。
スタイルを「構造」と「見た目」に分離することで、
同じコードを複数の場所で効率よく使用できます。
下記の例では、
btn を他のページやコンポーネントで
新しい色のボタンを追加する際も再利用できます。
html
<button class="btn btn-primary">Submit</button>
<button class="btn btn-secondary">Cancel</button>
css
/* 構造クラス: ボタンの基本的な構造を定義 */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: center;
}
/* 見た目クラス: 色や背景などを定義 */
.btn-primary {
background-color: #007bff;
color: #fff;
}
.btn-secondary {
background-color: #6c757d;
color: #fff;
}
特徴
- 構造と見た目を分離
- コンテナと内容を分離
メリット
- パーツの再利用性が高い
- メンテナンスが容易
- コード量の削減
デメリット
- コードが複雑になりやすい
- スタイルの適用箇所が分かりにくくなる可能性がある
BEM (Block Element Modifier)
BEMは要素をBlock、Element、Modifierの3つに分類して命名する手法です。
- Block：再利用可能なコンポーネントの単位を表す
- Element：ブロック内の構成要素を表す
- Modifier：ブロックまたはエレメントの状態や外観を表す
html
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="card__description">This is a description of the card.</p>
<button class="card__button card__button--primary">Learn More</button>
</div>
css
/* ブロック: カード全体のスタイル */
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
background-color: #fff;
}
/* エレメント: タイトル */
.card__title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
/* エレメント: 説明文 */
.card__description {
font-size: 14px;
color: #555;
}
/* エレメント: ボタンの基本スタイル */
.card__button {
display: inline-block;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
text-align: center;
}
/* モディファイア: プライマリボタン */
.card__button--primary {
background-color: #007bff;
color: white;
}
特徴
- 命名規則が明確（Block__Element--Modifier）
- 要素の関係性が名前から理解しやすい
メリット
- 再利用性が高い
- スタイルの意図が分かりやすい
- Sassなどの入れ子構造と相性が良い
デメリット
- クラス名が長くなりがち
- BEMを知らない人との協業が難しい
SMACSS (Scalable and Modular Architecture for CSS)
SMACSSはCSSを5つのカテゴリに分類する設計手法です。
- Base：デフォルトのスタイルや、HTMLタグのデフォルトスタイルを設定
- Layout：ページ全体の構造や主要なコンテナの配置を担当
- Module：再利用可能なUIコンポーネントを担当
- State：一時的な状態を表現するクラス
- Theme：サイト全体のデザインテーマを担当
特徴
- Base、Layout、Module、State、Themeの5分類
- 役割ごとにグルーピング
メリット
- 再利用性が高い
- メンテナンスが容易
- 管理がしやすい
デメリット
- 場所依存のパーツが多いサイトでは効果が薄い
FLOCSS (Fundation, Layout, Object CSS)
FLOCSSは日本で考案された比較的新しい設計手法です。
CSSを3つのレイヤーに分けます。
- Fundation：プロジェクト全体で共有される基本的なスタイルを記述
- Layout：ページ全体の構造を定義するスタイルを記述
- Object：再利用可能な小さな単位や特定の機能に特化したスタイルを定義
下記はディレクトリ構造の例です。
css/
├── foundation/
│ ├── _reset.css
│ ├── _variables.css
│ ├── _mixins.css
│ └── _base.css
├── layout/
│ ├── _header.css
│ ├── _footer.css
│ ├── _grid.css
│ └── _main.css
├── object
│ ├component/
│ │ ├── _button.css
│ │ ├── _card.css
│ │ ├── _modal.css
│ │ └── _form.css
│ ├project/
│ │ ├── _homepage-slider.css
│ │ └── _product-list.css
│ ├utility/
│ │ ├── _spacing.css
│ │ ├── _text.css
│ │ └── _visibility.css
特徴
- Foundation、Layout、Objectの3レイヤー構造
- Objectをさらに3つ（Component、Project、Utility）に分類
- BEMの命名規則を採用
メリット
- 大規模サイトでも管理しやすい
- OOCSS、SMACSS、BEMの長所を取り入れている
- 日本語のドキュメントが充実
デメリット
- レイヤー分けに迷うことがある
- クラス名が長くなりやすい
おわりに
OOCSS 、BEM は知っていましたが、
他にもこんなに種類があるとは知りませんでした。
今回記述した手法以外のも存在しているようです。
それぞれ長所と短所があり、
プロジェクト規模等を考慮して最適な手法を選択するのが大切かなと思いました。
それでは。
参考文献