全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSS設計 BEM（ベム）
2026.10.12
※この記事は2026年10月12日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
CSSの設計は、プロジェクトの成長とともにその重要性が増します。
その中でもBEM（Block、Element、Modifier）は、クラス命名規則としてコードの可読性と再利用性を向上させる効果的な手法です。
本記事では、BEMの基本概念から具体的な実装例までを紹介し、CSS設計のベストプラクティスを解説します。
BEM(ベム)とは
BEM（Block、Element、Modifier）は、CSSのクラス命名規則の一つで、コードの可読性と再利用性を向上させるための手法です。ロシアのWeb開発会社Yandexによって開発されたこの手法は、大規模なプロジェクトでも効率的にCSSを管理するために設計されています。
BEMの特徴
BEMの特徴は、その明確で一貫した命名規則にあります。クラス名は、コンポーネントをブロック、要素、修飾子という3つのカテゴリに分類して命名されます。この規則により、CSSのスタイルが他の部分に影響を与えにくくなり、メンテナンス性が向上します。
構成
BEMは、以下の3つの部分から構成されます：
- Block（ブロック）: 独立した再利用可能なコンポーネント。例: menu、button
- Element（エレメント）: ブロックの一部で、ブロックと関連する部分。例: menu__item、button__icon
- Modifier（修飾子）: ブロックやエレメントのバリエーションや状態を表す。例: menu__item–active、button–large
命名ルール
BEMの命名規則は以下の通りです：
- ブロック: block
- エレメント: block__element
- 修飾子: block–modifier、またはblock__element–modifier
例えば、buttonブロックにiconエレメントがあり、そのiconが大きい場合は、button__icon–largeというクラス名になります。
BEMのメリット
- 1. 可読性の向上: クラス名が構造を明確に示すため、コードが理解しやすくなります。
- 2. 再利用性の向上: ブロック単位で独立しているため、再利用が容易です。
- 3. 保守性の向上: 明確な構造により、他の部分に影響を与えずにスタイルを変更できます。
BEMのデメリット
- 1. 冗長なクラス名: クラス名が長くなりがちで、コードが冗長になる可能性があります。
- 2. 初学者には難しい: 命名規則が厳密なため、初めて学ぶ人には難しく感じることがあります。
BEMをうまく運用するコツ
- 1. ルールの徹底: チーム全体でBEMのルールを徹底し、一貫性を保つことが重要です。
- 2. ドキュメントの整備: プロジェクト開始時に命名規則や例をまとめたドキュメントを作成し、共有します。
- 3. ツールの活用: Linterやコードフォーマッターを活用して、BEMのルールに従っているかを自動でチェックする環境を整えます。
まとめ
BEMは、CSSの可読性や再利用性を高めるための強力な手法です。
正しく運用することで、プロジェクトの規模が大きくなっても効率的にスタイルを管理できます。
本記事を参考に、BEMを活用してCSS設計を最適化してみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
ホームページ制作の「外注・下請け」をお探しですか？
RunLandは制作会社様のリソース補完として、コーディング・WordPress構築・保守・セキュリティを工程単位で承っています。「デザイン支給でコーディングだけ」「WordPress構築だけ」といった単発のご依頼にも対応します。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
人気のWEBブログ
最新WEBブログ
-
NEW!
-
NEW!
-
NEW!
