CSS設計はどれがいいのか？主流・おすすめはこれだ！【コードやディレクトリ構成も紹介】

今どきのWeb制作で、CSS設計を考慮しないプロジェクトはほぼ存在しないでしょう。

ということで、様々なCSS設計思想が存在し、現場では使われているわけですが、

エンジニアさん

どのCSS設計がいいのかな。。。

エンジニアさん

現在の主流とか、おすすめとかあるのかな？

こんなことで悩んでませんか？

実は、CSS設計について、あることをしないと

という笑えない状況に簡単に陥ります。

そこで今回は、CSS設計の根幹の考えを理解できる、おすすめのCSS設計を「4つ」紹介します。

他のサイト以上に、具体的なコードをたくさん出して解説します！

また、「CSS設計にはおすすめは無い」と言われますが、初学者の方に限っては、

「このCSS設計思想だけ学んでおけば、大体なんでも対応できるようになる！！」

というものがあるので、その紹介もします。

しょーご

これを話している私自身は、Web制作歴7年目で、制作会社に入社したての社員さんに、

フリーランスなのにCSS設計面をアドバイスすることもあります笑

今回の記事を読んで頂くことで、CSS設計に関して適切な運用がわかるとともに、学習方法までわかるようになります。

それでは、一緒に見ていきましょう！

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

• デザインカンプからのコーディングを経験したい
• 現役エンジニアのレビューを受けてみたい
• 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

YouTube版-CSS設計解説

この記事の動画版は以下になります（記事の内容をもう少し噛み砕いて説明しています）

Scoped CSSでCSS設計のいらない世界へ

CSS設計の話をする前に、Scoped CSSについて触れておきます。

簡単に言うと、「クラス名がバッティングしない」という、夢のようなCSSです。

Web制作ではなく、Vue.jsなどを使用したWeb開発の現場ではScoped CSSが利用されることが多いです。

例えば以下はVue.jsで構築したコードですが、<style scoped>の中にCSSを書けば、このファイルの中にスコープが限定されるので、

別のファイルに同じクラス名を書いてもバッティングしないんですね。

<template>
  <div class="example">
    <p>This is a scoped style example.</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style scoped>
.example {
  color: red;
}

.example p {
  font-weight: bold;
}
</style>

仕組みとしては、出力したHTMLにコンポーネント毎にカスタムデータ属性を自動で付与し、CSS側にも対応するデータ属性を付与します。

カスタムデータ属性によってCSSの影響範囲が閉じられ、同じクラス名やセレクターであっても影響しないようになります。

<template>
  <div class="example" data-v-12345678>
    <p data-v-12345678>This is a scoped style example.</p>
  </div>
</template>

.example[data-v-12345678] {
  color: red;
}

.example[data-v-12345678] p[data-v-12345678] {
  font-weight: bold;
}

ありさちゃん

え！めっちゃ便利じゃん！！もうこれからはScoped CSS使えばいいじゃん！

と思うのですが、Web制作の現場ではまだまだWordPressを使用した制作や素のHTMLでの制作が多いですし、

CSS設計を知らないとScoped CSSでも可読性の悪いコードを書いてしまう可能性が高く、

暴走エンジニア

ヒャッハー！！なんと命名しようが自由だーーー！！

となると、チーム開発でも迷惑をかけると思います。

私自身はこれからWeb制作を始める人もCSS設計を当然知っておくべきだと思っているので、なので解説する感じです。

しょーご

これからWeb制作を仕事にする人にはまだまだ使われる技術なので、しっかり頭に入れておいて欲しいと思います！！

CSS設計とはそもそも何？

CSS設計は、よくこう説明されます。

CSS設計は、ウェブサイトやウェブアプリケーションのスタイルシートを効果的に管理するためのアプローチや手法のことを指します。

これにより、コードの保守性、再利用性、拡張性が向上し、プロジェクト全体の開発効率が高まります。

う〜ん、わかったような、分からないような、という感じですよね？

具体的なコードで説明しますね。

以下のコードを見てみてください。これはCSS設計の無いコードです。

<!-- HTML -->
<div class="box">
  <p class="text">Content</p>
</div>

<!-- 別の箇所のHTML -->
<div class="container">
  <p class="text">Text</p>
</div>

.box .text {
  color: red;
}

.container .text {
  color: blue;
}

この場合、.box .textと .container .textの両方が、同じクラス .text に異なる色を指定しています。

その結果、同じクラス .text を持つ要素でも、それぞれ異なる色が適用されてしまい、

人間が読んで理解しにくく、拡張もできない状態になってます。

この場合は、せめてクラス名は具体的にして欲しいですよね。

<div class="box">
  <p class="box-text">Content</p>
</div>

<!-- 別の箇所のHTML -->
<div class="container">
  <p class="container-text">Text</p>
</div>

極端な例だったかもしれませんが、このCSSが抱える問題を解決する「4つの要素」をここから紹介していきます。

良いCSS設計とはどんなもの？

CSS設計において重要なのは、

この4つです。

それぞれの要素に焦点を当てながら、具体的なコード例を紹介します。

1. 再利用しやすい

再利用性は、同じUIパターンや要素を、異なる箇所で簡単に再利用できるかどうかを示します。

以下は、ボタンのスタイルを再利用する例です。

<div class="button primary">Primary Button</div>
<div class="button secondary">Secondary Button</div>

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}

.primary {
  background-color: #3498db;
  color: #fff;
}

.secondary {
  background-color: #2ecc71;
  color: #fff;
}

この例では、.button クラスを使用してボタンの共通スタイルを定義し、

.primary クラスと .secondary クラスを使用してボタンの色やその他のスタイルを変更しています。

つまり、新しく色違いのボタンを生成するときは、.buttonクラスを付与するだけで、ほぼ完成することになります。

ありさちゃん

これなら、毎回ボタンの長いCSSをフルで書かなくても良くなる！

同じスタイルを持つ異なる種類のボタンを簡単に作成できる、これが再利用性です。

2. 拡張しやすい

拡張性は、表示バリエーションが増えた場合に、容易に新しいスタイルを追加できるかどうかを示します。

修正が広範囲に及ばず、新しいスタイルを追加することで既存のスタイルが影響を受けないことが望まれます。

以下は、アラートメッセージのスタイルを拡張可能にする例です。

<div class="alert success">Success message</div>
<div class="alert error">Error message</div>

/* CSS */
.alert {
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}

.success {
  background-color: #2ecc71;
  color: #fff;
}

.error {
  background-color: #e74c3c;
  color: #fff;
}

この例では、.alert クラスを使用してアラートメッセージの共通スタイルを定義し、

.success クラスと .error クラスを使用して成功メッセージとエラーメッセージのスタイルを変更しています。

このようにすることで、新しいタイプのアラートメッセージが追加された場合に、既存のスタイルを変更せずに、新しいスタイルを追加することが容易になります。

まさひろくん

❶再利用性と、「共通設定をまとめておく」所が似ているっぽい！

3. 保守しやすい

保守性は、既存のスタイルに影響を与えずに新しいスタイルを追加できるかどうかを示します。

また、コードが適切に構造化され、読みやすくなっていることが重要です。

以下は、カードコンポーネントのスタイルを保守しやすくする例です。

<div class="card">
  <div class="card-thumbnail">
    <img src="thumbnail.jpg" alt="Thumbnail">
  </div>
  <div class="card-header">Header</div>
  <div class="card-body">Body</div>
</div>

.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden; /* サムネイルがカードの範囲を超えないようにする */
}

.card-thumbnail img {
  width: 100%; /* サムネイルをカードの幅に合わせる */
  height: auto;
}

.card-header {
  background-color: #f0f0f0;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.card-body {
  padding: 20px;
}

この例では、card、card-thumbnail、card-header、card-bodyといったクラス名を使用し、要素の役割を明確にしています。これにより、コードの可読性が向上し、スタイルがどの要素に適用されるかが直感的に理解できます。

もしカードに新しい要素を追加する必要がある場合、各要素のスタイルが独立しているため、影響を最小限に抑えて新しいスタイルを追加することができます。

これが、保守性に寄与するということです。

4. 予測しやすい

予測性は、クラス名やスタイルが意味を持ち、どのような効果が期待されるかを見てわかるか？ということです。

以下は、メニューコンポーネントのスタイルを予測しやすくする例です。

<div class="navigation-menu">
  <ul class="navigation-list">
    <li class="navigation-item">Home</li>
    <li class="navigation-item">About</li>
    <li class="navigation-item">Services</li>
    <li class="navigation-item">Contact</li>
  </ul>
</div>

/* 全体のメニューコンテナのスタイル */
.navigation-menu {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

/* メニューリストのスタイル */
.navigation-list {
  display: flex; /* フレックスボックスを使用して横並びに */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* メニュー項目のスタイル */
.navigation-item {
  padding: 10px 20px; /* 横方向のパディングを追加 */
  border-right: 1px solid #ccc;
  cursor: pointer;
}

.navigation-item:last-child {
  border-right: none; /* 最後の項目の右ボーダーを削除 */
}

/* ホバー時のスタイル */
.navigation-item:hover {
  background-color: #e0e0e0;
}

.navigation-menu、.navigation-list、.navigation-itemといったクラス名を使用し、各要素の役割を明確にしています。

これにより、HTML構造を見ただけでメニューコンポーネントのレイアウトやスタイルが予測しやすくなります。

ようこちゃん

あれ？意外と私もこれぐらいならできてるかも！？

しょーご

これらはCSS設計のベースとなる考えですが、無意識にできてる人は多いかも。

CSS設計のよく使われる4つ

ここからは、CSS設計で現在主流のものが4つあるので、それぞれ１つずつ紹介していきます。

❶BEM

BEM (Block Element Modifier) は、クラス名の命名規則を使用して、命名が被らないようにしつつ、再利用しやすくする手法です。

ちなみに、BEMは設計思想というより、厳密には命名規則です。

昔YouTubeで紹介した際に、

コメント主

BEMは設計思想じゃないんだよなぁ〜

と指摘を受けまして、確かにとも思いつつ、分かり易さのために、設計の文脈で今回も紹介しています。

BEMのコード例

以下は、BEMの例です。

<div class="block">
  <div class="block__element"></div>
  <div class="block__element--modifier"></div>
</div>

この例では、.block がブロック要素、.block__element がそのElement、.block__element--modifier がElementのModifier(修飾子)を表しています。

エンジニアさん

いや、Modifier(修飾子)ってのがよく分からないんですが…

というのが、最初にぶつかる壁だと思います。

ボタンの色やサイズの変更、アクティブ状態などがModifierになります。

具体的なヘッダーのコードを見てみましょう。Block Element Modifierの場所を図示しています。

<div class="header">
    <div class="header__logo"></div>
    <nav class="header__nav">
        <ul class="header__menu">
            <li class="header__menu-item">
                <a class="header__menu-link" href="#">Home</a>
            </li>
            <li class="header__menu-item header__menu-item--active">
                <a class="header__menu-link" href="#">About</a>
            </li>
        </ul>
    </nav>
</div>

この例では、headerはBlockです。

その中には、logoやnavなどのElementがあります。

また、header__menu-item--activeのようにModifierを使用して、特定の要素の状態を表現しています。

このようにBEMを使うと、HTMLの構造がわかりやすくなり、スタイルの変更や保守が容易になります。

ただし、クラス名が長くなる可能性があるため、適切なバランスを保つ必要があります。

BEMの長所、短所

BEMの長所と短所をまとめます。

❷OOCSS

OOCSS（Object-Oriented CSS）は、スタイルを再利用可能な「オブジェクト」として扱います。

構造と見た目を切り分けるのが特徴です。

再利用性が肝

OOCSSでは、再利用性を重視していて、同じスタイルを複数の要素で使用できます。

例えば以下のコードを見てください。

<!-- HTML -->
<div class="box primary">Box 1</div>
<div class="box secondary">Box 2</div>
<button class="button primary">Primary Button</button>
<button class="button secondary">Secondary Button</button>

/* CSS */
/* ボックスの共通スタイル */
.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}

/* プライマリボックス */
.primary {
  background-color: #3498db;
  color: #fff;
}

/* セカンダリボックス */
.secondary {
  background-color: #2ecc71;
  color: #fff;
}

/* ボタンの共通スタイル */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* プライマリボタン */
.primary {
  background-color: #3498db;
  color: #fff;
}

/* セカンダリボタン */
.secondary {
  background-color: #2ecc71;
  color: #fff;
}

この例では、ボックスとボタンのそれぞれに共通のスタイル（幅、高さ、パディングなど）が定義されています。

これが構造。

そして、それぞれの要素に色だけ変える目的の、primaryとsecondaryスタイルが適用されています。

これが見た目。

構造と見た目の分離、これにより、同じ構造、今回の例で言えばboxとbuttonは複数の要素で使用できますよね。

エンジニアさん

あ！再利用性でも見たコードだ！なるほど。。。

補足：Bootstrapでの採用

実はBootstrapではOOCSSが採用されています。

ボタンなんかは分かりやすいと思います。

btnとbtn-〇〇という2つのクラスが付与されています。

btnクラスに基本となるcssを集約させていて、btn-〇〇で色を指定しています。

OOCSSはCSS設計の基礎理解に大事な設計思想になるので、是非BootstrapのCSSを研究してみてください。

https://getbootstrap.jp/docs/5.3/examples

OOCSSのSassディレクトリ構成

OOCSSを実際に案件で採用するとしたら、一般的には以下のようなディレクトリ構成になることが多いかと思います。

styles/
├── base/           # ベーススタイル 🟦
│   ├── 🟦 _reset.scss         # リセットスタイル
│   └── 🟦 _typography.scss    # タイポグラフィ関連のスタイル
├── layout/         # レイアウトスタイル 🟧
│   ├── 🟧 _grid.scss          # グリッドシステムなど
│   ├── 🟧 _header.scss        # ヘッダー関連のスタイル
│   └── 🟧 _footer.scss        # フッター関連のスタイル
├── objects/        # オブジェクトスタイル 🟩
│   ├── 🟩 _button.scss        # ボタン関連のスタイル
│   ├── 🟩 _form.scss          # フォーム関連のスタイル
│   └── 🟩 _media.scss         # メディア関連のスタイル
├── components/     # コンポーネントスタイル 🟪
│   ├── 🟪 _navbar.scss        # ナビゲーションバー関連のスタイル
│   ├── 🟪 _slider.scss        # スライダー関連のスタイル
│   └── 🟪 _tabs.scss          # タブスタイル
└── utilities/      # ユーティリティスタイル 🟥
    ├── 🟥 _spacing.scss       # スペーシング関連のスタイル
    ├── 🟥 _helpers.scss       # ヘルパークラス
    └── 🟥 _animations.scss    # アニメーション関連のスタイル

└──pages　個別ページにしか使わないスタイルを管理
  ├── about
  │ └── _index.scss
  ├── company
  │ └── _index.scss
  └──top
   　 └── _index.scss

OOCSSの長所、短所

例えば以下のように一つのコンポーネントに対して複数のクラス名を付与することになり、これをどう捉えるかですね。

<div class="header header--fixed header--large header--dark">
  <!-- コンテンツ -->
</div>

❸SMACSS

SMACSS（Scalable and Modular Architecture for CSS）は、プロジェクトが大規模になっても管理しやすくするために、

CSSを5つのカテゴリーに分類してスタイルシートを整理する方法です。

エンジニアさん

うん？OOCSSとは何が違うの？

と多くの方は思うと思いますが、基本的にOOCSSより厳密に指定された5つのファイルで管理する設計と考えてもらって差し支えありません。

これらを１つずつ解説します。

1. ベース（Base）

ベースは、リセット、標準化された要素のスタイル、ボックスモデルの調整など、

プロジェクト全体で共通の基本的なスタイルを定義します。

例: html, body, a, pなどのタグに対するスタイル。

/* ベーススタイル */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, em, strong, sub, sup, ol, ul, li, article, aside, footer, header, nav, section, figcaption, figure, main {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

2. レイアウト（Layout）

ページの主要なセクションやコンテナのレイアウトに関するスタイルを定義します。
例: ヘッダー、フッター、サイドバー、グリッドシステム。

接頭辞にlをつけます。

/* レイアウトスタイル */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
}

.l-header {
  background-color: #f0f0f0;
  padding: 20px;
}

.l-footer {
  background-color: #f0f0f0;
  padding: 20px;
}

3. モジュール（Module）

モジュールは、再利用可能な部品やコンポーネントに関するスタイルを定義します。

例: カード、ナビゲーションバー、ボタン、フォーム。

しょーご

ここのコード量が多くなりがちですかね。

/* モジュールスタイル */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

4. 状態（State）

状態は、特定の状態や状況に応じてスタイルを変更するためのスタイルを定義します。

例えば、hoverやactiveなどの状態が含まれます。

また、JSで状態が変わるときは、is-〇〇という命名にします。

/* 状態スタイル */
.button:hover {
  background-color: #3498db;
  color: #fff;
}

.form-input.error {
  border-color: #ff0000;
}
.is-over{
background:#000;
}
.is-hidden{
display:none;
}

しょーご

まあ実務ではJSでの状態変化しかstateには入れないことの方が多いかもしれません。

5. テーマ（Theme）

テーマは、プロジェクトのテーマやスキンに関するスタイルを定義します。

例: 色の変更、フォントの変更などのビジュアル調整。

/* テーマスタイル */
.theme-dark {
  background-color: #333;
  color: #fff;
}

.theme-light {
  background-color: #f9f9f9;
  color: #333;
}

しょーご

個人的にはほとんど使ったことはありませんね。

SMACSSのディレクトリ構成

styles/
├── base/           # ベーススタイル
│   ├── 🟦 _reset.scss         # リセットスタイル
│   └── 🟦 _typography.scss    # タイポグラフィ関連のスタイル
├── layout/         # レイアウトスタイル
│   ├── 🟧 _grid.scss          # グリッドシステムなど
│   ├── 🟧 _header.scss        # ヘッダー関連のスタイル
│   └── 🟧 _footer.scss        # フッター関連のスタイル
├── modules/        # モジュールスタイル
│   ├── 🟩 _button.scss        # ボタン関連のスタイル
│   ├── 🟩 _form.scss          # フォーム関連のスタイル
│   └── 🟩 _media.scss         # メディア関連のスタイル
├── state/          # 状態スタイル
│   ├── 🟪 _hover.scss         # hover時のスタイル
│   └── 🟪 _active.scss        # active時のスタイル
└── theme/          # テーマスタイル
    ├── 🟥 _dark.scss          # ダークテーマ関連のスタイル
    └── 🟥 _light.scss         # ライトテーマ関連のスタイル

└──pages　個別ページにしか使わないスタイルを管理
  ├── about
  │ └── _index.scss
  ├── company
  │ └── _index.scss
  └──top
   　 └── _index.scss

SMACSSの長所、短所

❹FLOCSS

FLOCSSは、ここまで紹介してきたOOCSSやSMACSSの考えを取り入れたいいとこ取りの設計で、

命名規則にBEMを採用した設計思想になっています。

大きく5つの種類のファイルでスタイルを管理します。

順番に解説します。

1. Foundation (基盤)

Foundationは、プロジェクト全体で共通のスタイルやリセットなど、基本的なスタイルを定義します。

/* Reset styles */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, em, strong, sub, sup, ol, ul, li, article, aside, footer, header, nav, section, figcaption, figure, main {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Global styles */
body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

/* Helper classes */
.u-text-center {
  text-align: center;
}

.u-mb-10 {
  margin-bottom: 10px;
}

2. Layout (レイアウト)

Layoutは、ページの構造やレイアウトに関するスタイルを定義します。

接頭辞にlをつけます。SMACSSにもありましたね。

/* Layout styles */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
}

.l-header {
  background-color: #f0f0f0;
  padding: 20px;
}

.l-footer {
  background-color: #f0f0f0;
  padding: 20px;
}

3. Component (コンポーネント)

Componentは、再利用可能でページ横断で使用されるパーツやコンポーネントに関するスタイルを定義します。

接頭辞にcをつけます。

/* Component styles */
.c-button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.c-form-input {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.c-media {
  /* メディア関連のスタイル */
}

.c-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

4. Project (プロジェクト)

Projectは、ページ固有のパーツやコンポーネントに関するスタイルを定義します。

Webサイトはほとんどがページ固有のスタイルなので、ここにほぼ全てのスタイルを書いていくことになります。

/* Project-specific styles */
.p-top-articles {
  /* トップページの記事のスタイル */
}

.p-top-ranking {
  /* トップページのランキングのスタイル */
}

.p-top-comments {
  /* トップページのコメントのスタイル */
}

.p-top-profile {
  /* トップページのプロフィールのスタイル */
}

.p-top-login-form {
  /* トップページのログインフォームのスタイル */
}

5. Utility (ユーティリティ)

Utilityは、わずかなスタイル調整のための便利なクラスを定義します。

/* Utility styles */
.u-inline-block {
  display: inline-block;
}

.u-text-center {
  text-align: center;
}

.u-mb-10 {
  margin-bottom: 10px;
}

FLOCSSのSassディレクトリ構成

├── 🟦 style.scss                  # エントリーポイントのスタイルファイル
├── foundation/                   # Foundation（基盤）スタイル 🟦
│   ├── 🟦 _base.scss              # リセットCSSや基本的なスタイル
│   ├── 🟦 _system.scss            # JavaScript関連のスタイル
│   ├── 🟦 _variables.scss         # 変数
│   ├── 🟦 _mixin.scss             # mixin
│   └── 🟦 _index.scss             # foundationディレクトリのインデックスファイル
├── layout/                       # Layout（レイアウト）スタイル 🟧
│   ├── 🟧 _footer.scss            # フッターのスタイル
│   ├── 🟧 _header.scss            # ヘッダーのスタイル
│   ├── 🟧 _main.scss              # mainタグのスタイル
│   └── 🟧 _sidebar.scss           # サイドバーのスタイル
├── object/                       # Object（オブジェクト）スタイル 
│   ├── component/                # Component（コンポーネント）スタイル 🟩
│   │   ├── 🟪 _navbar.scss       # ナビゲーションバー関連のスタイル
│   │   ├── 🟪 _slider.scss       # スライダー関連のスタイル
│   │   └── 🟪 _tabs.scss         # タブスタイル
│   ├── project/                  # Project（プロジェクト）スタイル 🟪
│   │   ├── 🟪 _articles.scss     # 記事関連のスタイル
│   │   ├── 🟪 _contact.scss      # お問い合わせ関連のスタイル
│   │   ├── 🟪 _gallery.scss      # ギャラリー関連のスタイル
│   │   └── 🟪 _profile.scss      # プロフィール関連のスタイル
│   └── utility/                  # Utility（ユーティリティ）スタイル 🟥
│       ├── 🟥 _spacing.scss      # スペーシング関連のスタイル
│       ├── 🟥 _helpers.scss      # ヘルパークラス
│       └── 🟥 _animations.scss   # アニメーション関連のスタイル

実際にSassでこのディレクトリをコンパイルする方法を一応解説しておきます。

<!-- foundation/_index.scss -->
@forward 'variables';
@forward 'mixin';
@forward 'base';
@forward 'system';

このように、各ディレクトリ内の_index.scssファイル内で同列のファイルを@forwardで読み込み、一番上階層にあるstyle.scssで@useして読み込んであげてください。

<!-- style.scss -->
@use 'foundation/index' as *;
@use 'layout/index' as *;
@use 'object/component/index' as *;
@use 'object/project/index' as *;
@use 'object/utility/index' as *;

これでうまくCSSにコンパイルされるはずです。

FLOCSSの長所、短所

しょーご

FLOCSSは「Projectをどう運用するか」にかかっています。

案件毎に様々な解釈が混じっており、粒度が違うので、取り敢えず「特定ページでしか使わないものはProjectに書く」ぐらいの理解でもいいかと。

結局CSS設計のおすすめはどれか？

エンジニアさん

それで、結局どのCSS設計がおすすめなんでしょうか？

大前提として、CSS設計は「これさえ使えば万事OK」というものはありません。

プロジェクトによって規模が異なるので、採用するべき設計も変わるからです。

しかし！！

この記事の冒頭で、初学者の方に限っては、

「この設計思想だけ学んでおけば、大体なんでも対応できるようになる！！」

というものがあるので、その紹介もすると言いました。

それは、「SMACSSとFLOCSS」です。

詳細なCSS設計が必要になる中規模以上のサイトでのCSS設計は、本当に頭を悩ませますが、

取り敢えず「SMACSSとFLOCSS」の思想を理解していたら、戦うことはできます。

ただ実際に自分で運用してみると分かりますが、例えば「FLOCSSのComponentとProjectの境界線ってどこやねん」みたいな問題が次々に出てきて、

結局各企業がオリジナリティーを加えて運用していることが多いので、まずは、実際に自分で書いて試行錯誤するのが重要だと思います。

CSS設計のおすすめの学び方は？

❶まずは、本2冊で学ぶ

CSS設計は基礎的な思想を学んだら、後は実例に触れるのが大事だと思います。

まず基礎的な部分は「Web制作者のためのCSS設計の教科書」で理解してください。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

created by Rinker

¥1,881 (2025/03/24 16:42:34時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場

その後、「CSS設計完全ガイド」で実例に多く触れるのがいいと思います。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

created by Rinker

¥3,536 (2025/03/24 16:42:34時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場

更に詳細は以下の記事で述べていますが、この順番で2冊とも読めば理解度が上げやすいです。

そのWeb制作スキルいらないかも！？必要だし差もつけられるスキルと不要なスキルを徹底解説

また私の出してるWeb制作独学ロードマップでもこの順番で学習を勧めています。

【2024年最新】Web制作を完全独学で極める最強ロードマップ【現役エンジニア監修】

❷コーディングで実践する

本で学んだ知識が活かせるか、実際に複数ページをコーディングしてみてください。

私の出しているコーディング演習課題を使用して練習してもらうのもいいと思います。

特に中級Ex、上級、超実践編は複数ページのコーディングなので、CSS設計も練習しやすいです。

デザインカンプからのコーディング練習課題 | 爆速レビュー付きしょーごログのデザインカンプからのコーディング課題では、プロのレビュー付きでWeb制作のポートフォリオを準備することが可能。転職から案件獲得まで役立ちます。...

また、「【パパッと効率化！】コーディング効率化講座 ~CSS設計編~」という教材もいいですね。

「【パパッと効率化！】コーディング効率化講座 ~CSS設計編~」で特に面白いと思った部分は、

この部分ですね。結局実例を見るのが分かりやすいですので。

しょーご

っていうか教材内の口コミ紹介見てたら、私のコーディング課題も、この教材を使って爆速構築している人がいて笑いましたw

【パパッと効率化！】コーディング効率化講座 ~CSS設計編~

❸納期がある中で実践する

実際は案件の納期が短い場合もありますよね。

10ページコーディングを2週間で行うってなった時に、あなたは

これ全部やれる自信がありますか？

しょーご

納期が短いほど焦って、理想とは違ってコードがぐちゃぐちゃになりやすいですよね。

それを予め「模擬案件」という、超実践形式で練習できる課題を出すので、興味があれば以下の記事を見てみてください。

これで本当にCSS設計が実践できるのか、自分を試すことができます。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける！【学習沼からあなたを卒業させます】コーディング課題【超実践編】はコーディングレビューだけでなく、コミュニケーション面や納期設定など極限まで実務の再現にこだわった、模擬案件が経験できる課題です。継続と紹介で案件が回るレベルを目指します。...

毎月数人だけをガッツリレビューします。

今回のまとめ

今回はCSS設計を、できるだけ具体的なコードやディレクトリ構成をもとに解説してきました。

実際は現場毎に、今回紹介した設計をカスタマイズして使っていることが多いですが、

元になる設計を知らないと、カスタマイズされたものを理解するのにも時間がかかるので、

是非何度も読み返して理解していただければと思います。

そして、CSS設計は自分でコードを書いて定着させるのが一番大事なので、是非書きつつ、壁にぶつかってもらえればと思います。

YouTube版-CSS設計解説

この記事の動画版は以下になります（記事の内容をもう少し噛み砕いて説明しています）

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

1. Figma,Photoshopデザインからのコーディング
2. サーバーアップロードでサイト公開
3. プロによる最大3回の表示確認特典
4. レビュー返しは爆速
5. 2024年にデザイン刷新！被らないポートフォリオ

「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル！！

他者と差をつけられるポートフォリオが準備できます！

しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます！

基本的に「まとめて購入」していただくとかなりお得になります↓

まとめて購入

全部盛りはこちらから
中級以上はこちらから
即戦力編はこちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！

＼課題の購入はこちらから／

課題の販売ページへ