- CSS設計ってそもそも何？
- 効率的にCSSを管理したい
- チーム開発をスムーズに進めたい
このような悩みにお答えします。
書くだけであれば単純なCSSですが、サイトの規模が大きくなるにつれて管理が難しくなることが多々あります。
特に複数人での開発を行う際、一貫性のあるコーディングルールや命名規則がないと、後々の保守や拡張が大変なことになります。
この記事では、CSS設計の基本から、主要な設計手法の比較、そしておすすめの参考書までわかりやすく解説します。
初心者から中級者まで、CSS設計に関する知識を深めたい方に向けて、具体的な手法や実践例を交えてご紹介します。
CSS設計とは
CSS設計とは、HTMLのクラス名と、CSSコードの書き方のルールのことです。
1人で最後までサイトを管理するのであれば必要ないですが、そんなことは滅多にないと思います。
運用に入ってから他の人にバトンタッチしたり共同で運用したりすることのほうが多いです。
また、大規模なサイトであれば開発の段階から複数人でコーディングすることが多いです。
その時に共通のルールがあるとスムーズに開発・運用をしていくことができます。
CSS設計を行うことで業務の効率化、そして品質の向上が期待できます。
CSS設計のポイントは、以下の4つです。
- 予測できる
- 再利用できる
- 保守できる
- 拡張できる
予測できる
「予測できる」とは即ち、「スタイリングが期待通りに振る舞うかどうか」「スタイリングの影響範囲が予測できるか」を意味しています。新しいスタイリングを追加する、または既存のスタイリングを更新しても、自分の意図しない箇所に影響を与えないよう設計されているべきです。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
自分のコード変更によって影響が出る箇所、出ない箇所がすぐ理解できる状態です。
意図しない箇所に影響が出てしまうと、時間も労力をロスしてしまいます。
再利用できる
コードをいちいち書き直したり上書きする手間がない状態が「再利用できる」状態です。そのために、スタイリングはきちんと抽象化されており、また適切に分離されている必要があります
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
例えば見出しなど、違う場所でも再利用できる状態のことです。
「このクラス名を入れればこのデザインになる」というのがベストかと思います。
保守できる
新しいモジュールや機能を追加・更新、あるいは配置換えしたとき、既存のCSSをリファクタリングする必要がない状態が「保守できる」状態
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
コードを追加した際、すでに書いてあるコードを修正する必要がない状態です。
拡張できる
「拡張できる」CSSとは、CSSに携わる人が1人であっても複数からなるチームであっても、問題なく管理できる状態を指します。そのためにはCSS設計の規則はわかりやすく、学習コストが極端に高くない状態である必要があります。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
コードを見て、すぐに内容を理解できる状態のことを指します。
この状態であれば修正や追加もすぐに着手することができます。
これらのポイントを理解し、実装していくことで、効率的かつ柔軟なコーディングが可能となります。
主要なCSS設計手法
CSS設計の手法は多くありますが、よく目にするのは以下の3つです。
- BEM
- FLOCSS
- OOCSS
順に解説していきます。
BEM (Block Element Modifier)
BEMは、CSSのクラス名を一貫性のある方法で命名するための命名規則です。
具体的には、ブロック__要素--修飾子の形式でクラス名を作成します。これにより、CSSのセレクタの意味や役割が明確になります。
<div class="card">
<p class="card__title">タイトル</p>
<p class="card__text">テキスト</p>
<button class="card__button card__button--primary">ボタン</button>
</div> .card {
border: 1px solid #ddd;
padding: 20px;
}
.card__title {
font-size: 24px;
margin-bottom: 10px;
}
.card__text {
font-size: 16px;
margin-bottom: 20px;
}
.card__button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
}
.card__button--primary {
background-color: #FF5733;
}メリット
- 再利用性: 同じスタイルのコンポーネントをページ全体で再利用しやすくなります。
- 可読性: クラス名からそのスタイルが何を意味するのかがわかりやすくなります。
- 修正の容易性: 特定のコンポーネントのスタイルを修正する際に、他の部分に影響を与えにくくなります。
FLOCSS (Flexible, Layer, Object, Component, State, Scope)
FLOCSSは、CSSの構造を層に分けて整理する設計手法です。
具体的には、Foundation、Layout、Object、Component、Utilityの5つの層に分けてスタイルを管理します。
<header class="l-header">
<nav class="c-nav">
<a href="#" class="c-nav__link u-text-bold">ホーム</a>
<a href="#" class="c-nav__link">お問い合わせ</a>
</nav>
</header> /* Layout */
.l-header {
background-color: #333;
padding: 10px 0;
}
/* Component */
.c-nav {
text-align: center;
}
.c-nav__link {
margin: 0 10px;
color: white;
text-decoration: none;
}
/* Utility */
.u-text-bold {
font-weight: bold;
}メリット
- 整理された構造: CSSのルールが明確な層に分かれているため、管理や追加がしやすくなります。
- 拡張性: 新しいスタイルやコンポーネントを追加する際の方針が明確で、既存のスタイルに影響を与えにくくなります。
- 再利用性: ObjectやComponentとして定義されたスタイルは、サイト全体で再利用しやすくなります。
OOCSS (Object-Oriented CSS)
OOCSSは、再利用可能な「オブジェクト」としてスタイルを設計する手法です。
これにより、同じスタイルの繰り返しを減らし、効率的にCSSを管理することができます。
<button class="btn btn-large btn-red">赤い大きなボタン</button>
<button class="btn btn-blue">青いボタン</button> .btn {
padding: 10px 15px;
border: none;
color: white;
}
.btn-large {
font-size: 20px;
}
.btn-red {
background-color: red;
}
.btn-blue {
background-color: blue;
}メリット
- 再利用性: スタイルをオブジェクトとして定義することで、同じスタイルの繰り返しを減らすことができます。
- 保守性: オブジェクト指向の考え方を取り入れることで、スタイルの修正や追加が容易になります。
- 効率的なコード: 重複するスタイルの削減により、CSSのファイルサイズを小さく保つことができます。
おすすめの参考書籍
CSS設計に関する本は色々ありますが、個人的にこの2冊さえ読んでおけばOKです。
基礎から具体例まで、幅広くカバーしています。
あとはCSS設計に慣れるのも大事かと思いますので、学習したら、手を動かして見てください。
おわりに
CSS設計の基本から、主要な設計手法の比較、そしておすすめの参考書まで解説しました。
CSS設計のポイントは以下の3つです。
- 予測できる
- 再利用できる
- 保守できる
- 拡張できる
よく使われるCSS設計は以下のとおり。
- BEM
- FLOCSS
- OOCSS
知識をして知っておくと、案件に参加したときに「なんだこれ？」となることも少なくなると思います。
そしてCSS設計を知っていれば、チーム開発や運用ももっとスムーズに進められるようになります。
コーディング方法やチーム開発で悩んでいる方の参考になれば幸いです。