Planning
【CSS設計】BEM・Sassを使ったフォルダ構成
Planning
BEMを使って大規模なサイトやWordPressテーマを構築する際、
Sass（SCSS）のフォルダ構成（ディレクトリ設計）を美しく整えておくと、
コンポーネントの再利用性やメンテナンス性が劇的に向上します。
現在、フロントエンド開発で最も広く使われている設計思想は、
CSS設計の世界的ベストプラクティスである「SMACSS」や「FLOCSS（フロックス）」の考え方をベースに、
BEMのコンポーネント単位でファイルを細分化するアプローチです。
実務や個人開発でそのまま使える、BEMと非常に相性が良いSassのフォルダ構成をまとめました。
そもそも、BEMとはなんだ？という方は、
BEMの基本をまとめた記事を用意していますので、こちらをチェックしてください。
1. 推奨されるフォルダ構成（ディレクトリ構造）
Sassの管理手法として標準的な
「7-1パターン（7つのフォルダと1つのメインファイル）」をベースに、
BEM（Block単位の分割）を落とし込んだ構成です。
各フォルダ内のファイル名の先頭には、
Sassのファイル分割ルールであるアンダースコア（_）を付与します。
scss/
│
├── foundation/ # 1. サイト全体の土台（要素の上書き）
│ ├── _reset.scss # リセットCSS（DestyleやNormalizeなど）
│ └── _base.scss # 全体共通（bodyの背景色、デフォルトの文字色、フォント等）
│
├── global/ # 2. 変数や共通ツール（CSSは出力しない）
│ ├── _variables.scss # カラーコード、フォント、Z-indexなどの変数
│ └── _mixins.scss # メディアクエリ（ブレイクポイント）や汎用関数
│
├── layout/ # 3. 画面を構成する大きな枠組み（Block）
│ ├── _header.scss # .l-header (サイト共通ヘッダー)
│ ├── _footer.scss # .l-footer (サイト共通フッター)
│ └── _sidebar.scss # .l-sidebar (サイドバー)
│
├── component/ # 4. 再利用可能な最小限のパーツ（BEMの核）
│ ├── _btn.scss # .c-btn (様々な場所で使うボタン)
│ ├── _card.scss # .c-card (記事一覧などのカード型パーツ)
│ ├── _title.scss # .c-title (セクション見出しなど)
│ └── _nav.scss # .c-nav (グローバルナビ、SNSナビなど)
│
├── project/ # 5. 特定のページや文脈に依存する固有の要素（BEMの核）
│ ├── _mv.scss # .p-mv (メインビジュアル)
│ ├── _faq.scss # .p-faq (よくある質問セクション)
│ └── _contact.scss # .p-contact (お問い合わせフォーム)
│
└── style.scss # すべてのファイルを一括で読み込むメインファイル
2. 各フォルダの役割とBEMの組み合わせ方
③ foundation/
リセットcssやサイト全体に共通するスタイルをまとめるフォルダです。
② global/
CSS自体は出力せず、Sassの機能（変数やMixin）をまとめるフォルダです。
カラーコード（$color-primary: #xxxxxx; など）や、レスポンシブ用のメディアクエリをここに定義します。
③ layout/ （接頭辞：l-）
ページ全体のレイアウトを形作る、構造的なBlockを管理します。
基本的にはどのページでも共通して配置される、ヘッダー、フッター、メインコンテンツエリア、サイドバーなどが該当します。
- 記述例：
.l-header,.l-footer
④ component/ （接頭辞：c-）
「単体で独立しており、どこに移動させても100%同じ見た目で機能する」最小単位のBlockを管理します。
ボタン（.c-btn）やカード（.c-card）などは、
トップページでも、下層ページでも、サイドバーの中でも再利用されるため、ここに集約します。
⑤ project/ （接頭辞：p-）
component/ よりも大きな、いくつかのパーツ（Elementや他のComponent）が組み合わさった具体的なBlockを管理します。
例えば、トップページのメインビジュアル（.p-mv）や、会社概要（.p-profile）など、
特定のセクションそのものを1つのBlockとして定義します。
💡 接頭辞（プレフィックス）をつけるメリット
HTML上でクラス名を見たときに、
class="c-btn"であれば「これはどこでも使い回せるボタンだな」、
class="p-mv__title"であれば「これはメインビジュアル特有の見出しだな」と、コードの役割が瞬時に判断できるようになります。
⑥ style.scss
上記のファイルを全て読み込むファイルです。
このファイルからcssをコンパイルします。
3. 具体的なSass（SCSS）の書き方
各ファイル（Block単位）の中では、
BEMの命名規則に合わせて、Sassのアンパサンド（&）によるネストを活用して記述します。
【例： component/_card.scss の中身】
// globalで定義した変数やmixinを読み込む
@use "../global" as g;
.c-card {
display: block;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
// Element: カードの画像エリア (__ で繋ぐ)
&__img {
width: 100%;
height: auto;
object-fit: cover;
}
// Element: カードのテキスト内容
&__body {
padding: 20px;
}
// Element: タイトル
&__title {
font-size: 18px;
font-weight: bold;
// 画面幅がタブレット以上の時のスタイル（Mixinを活用）
@include g.mq(md) {
font-size: 22px;
}
}
// Modifier: 注目させたいカードのバリエーション (-- で繋ぐ)
&--featured {
border: 2px solid #ff0000;
}
}
4. 親ファイル（style.scss）での読み込み方
最後に、すべてのファイルを style.scss で一括で読み込みます。
コンパイル（CSSへの変換）はこの style.scss 1つに対して行います。
CSSの依存関係（上書きルール）を正しく保つため、読み込む順番が非常に重要です。
土台（foundation）から始まり、徐々に具体的なパーツ（project）へと進むように記述します。
/* ==========================================================================
style.scss (Sass一括読み込み用の総親ファイル)
========================================================================== */
// 1. Foundation (土台)
@use "foundation/reset";
@use "foundation/base";
// 2. Layout (大きな枠組み)
@use "layout/header";
@use "layout/footer";
@use "layout/sidebar";
// 3. Component (再利用パーツ)
@use "component/btn";
@use "component/card";
@use "component/title";
@use "component/nav";
// 4. Project (各セクション・固有要素)
@use "project/mv";
@use "project/faq";
@use "project/contact";
運用のワンポイント
新しくコンポーネント（例：_gallery.scss）を作った際は、
component/ フォルダにファイルを格納し、
この style.scssに @use "component/gallery"; を追記するだけで、
自動的にBEMの独立したスタイルが破綻なくサイト全体に適用されます。
まとめ
これらのフォルダ構成を用いて、大規模なサイトでも運営を効率的に行えます。
ぜひ、BEMを用いたCSS設計をマスターしましょう！
