以下のように、FLOCSSとBEMの組み合わせによるCSS設計をSCSSでまとめたブログ記事を書いてみました。
CSS設計を改善！FLOCSSとBEMを活用したSCSS構成ガイド
Webアプリケーションやサイトのスタイルが複雑化する中、CSSの設計はますます重要です。本記事では、FLOCSSとBEMを組み合わせ、SCSSで効率よくスタイルを管理する方法を紹介します。このアプローチは、可読性や再利用性が高く、特に大規模なプロジェクトに適しています。
目次
- FLOCSSとBEMの概要
- HTMLとSCSSによる具体的なコード例
- FLOCSSとBEMを活用したSCSS設計のメリット
1. FLOCSSとBEMの概要
FLOCSSとは
FLOCSSは、CSSを「Foundation（土台）, Layout（レイアウト）, Object（オブジェクト）, Component（コンポーネント）, Utility（ユーティリティ）」のレイヤーに分けて設計する手法です。この分割により、役割が異なるスタイルを分けて管理できるため、メンテナンス性が高まります。
- Foundation：リセットCSSやベーススタイル
- Layout：ページ全体のレイアウトに関するスタイル
- Object：再利用可能な要素のスタイル
- Component：プロジェクト固有のUI部品のスタイル
- Utility：マージンやテキストのスタイルなど、小さなユーティリティクラス
BEMとは
BEM（Block, Element, Modifier）は、CSSクラス名の命名規則で、以下のようにクラスの構造がはっきりとわかるようにします。
- Block：独立したコンポーネント（例：
.header） - Element：Blockの子要素（例：
.header__menu） - Modifier：BlockやElementの状態（例：
.header__menu--active）
2. HTMLとSCSSによる具体的なコード例
それでは、FLOCSSとBEMの組み合わせを実際のコードで見ていきましょう。
HTML構造
まずはHTMLでFLOCSSとBEMの命名規則を適用した例です。
<divclass="l-header"><divclass="c-logo"><imgsrc="logo.png"alt="Logo"></div><navclass="c-nav"><ulclass="c-menu"><liclass="c-menu__item c-menu__item--active">Home</li><liclass="c-menu__item">About</li><liclass="c-menu__item">Contact</li></ul></nav></div>
SCSS構成とコード
FLOCSSの各レイヤーに応じて、SCSSファイルを分けて管理します。
Foundation Layer
リセットCSSを定義し、要素ごとの余白を統一します。
// reset.scss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Layout Layer
レイアウトに関するスタイルは「l-」で始め、ページ全体のレイアウトを管理します。
// layout.scss
.l-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}Object Layer - Component
共通の再利用可能なコンポーネントには「c-」をつけ、BEMの命名規則に沿ってスタイルを適用します。
// component.scss
.c-logo {
img {
width: 100px;
}
}
.c-nav {
display: flex;
}
.c-menu {
display: flex;
list-style: none;
&__item {
margin: 0 15px;
cursor: pointer;
&--active {
font-weight: bold;
color: #ff6347;
}
}
}Object Layer - Utility
ユーティリティクラスは、特定の用途や状況に応じて小さなスタイルを適用できるようにします。
// utility.scss
.u-text-center {
text-align: center;
}
.u-margin-bottom-small {
margin-bottom: 10px;
}3. FLOCSSとBEMを活用したSCSS設計のメリット
メリット1. 保守性が向上
FLOCSSによるレイヤー構造とBEMの命名規則を組み合わせることで、どこにどのスタイルが定義されているかが分かりやすくなります。特に大規模なプロジェクトでは、チームメンバーが直感的にコードを理解しやすくなり、効率的にスタイルを追加・修正できます。
メリット2. コードの再利用性が向上
コンポーネントを「c-」で定義し、レイアウトやユーティリティと明確に分けることで、使いまわしがしやすくなります。例えば、c-menuやc-logoは異なるページでも簡単に再利用可能です。
メリット3. 可読性の向上
SCSSのネスト機能により、BEMの構造がコード内で視覚的に表現されます。これにより、クラス名の関係性がわかりやすくなり、コード全体の可読性も向上します。
まとめ
FLOCSSとBEMを組み合わせ、さらにSCSSで効率化を図ることで、CSSの保守性、再利用性、可読性が劇的に向上します。このアプローチは、CSS設計に悩んでいる方や、大規模プロジェクトに関わるエンジニアにとって、大きな助けとなるでしょう。ぜひこの方法を取り入れ、あなたのCSS設計に役立ててください！