開発
CSS BEM記法の基礎とその効果的な活用法
ウェブ開発において、CSSの管理はしばしば難題となります。特にプロジェクトが大規模になると、スタイルの一貫性を保ちつつ、メンテナンスしやすいコードを書くことが求められます。そんな時に役立つのがBEM(Block Element Modifier)記法です。本記事では、BEM記法の基本とその効果的な活用法について解説します。
BEM記法とは?
BEMは、ロシアのYandex社が提唱したCSSの命名規則で、ブロック(Block)、要素(Element)、修飾子(Modifier)の三つの概念から成り立っています。以下、それぞれの詳細を見ていきましょう。
- Block(ブロック)
独立した再利用可能なコンポーネントを指します。例えば、ヘッダーやボタン、メニューなどが該当します。
例: .button - Element(要素)
ブロックの一部を構成する子要素を指します。ブロックと一緒に使われることで、その意味を持つ要素です。
例: .button__icon - Modifier(修飾子)
ブロックや要素の外観や振る舞いを変更するためのものです。修飾子はブロックや要素に追加されて、特定の状態やバリエーションを示します。
例: .button–large
BEM記法のメリット
- 一貫性のある命名規則
BEM記法に従うことで、クラス名の一貫性が保たれ、コードが読みやすくなります。 - メンテナンス性の向上
コンポーネントごとにクラス名を分けるため、スタイルの影響範囲が限定され、メンテナンスが容易になります。 - 再利用性の向上
ブロックや要素、修飾子を組み合わせることで、再利用可能なコンポーネントを簡単に作成できます。
BEM記法の実践例
具体的にBEM記法を使ったコード例を見てみましょう。
<div class="card">
<div class="card__header">
<h2 class="card__title">Card Title</h2>
</div>
<div class="card__body">
<p class="card__text">This is a sample card.</p>
</div>
<div class="card__footer">
<button class="button button--primary">Read More</button>
</div>
</div>
.card {
/* Card styles */
}
.card__header {
/* Card header styles */
}
.card__title {
/* Card title styles */
}
.card__body {
/* Card body styles */
}
.card__text {
/* Card text styles */
}
.card__footer {
/* Card footer styles */
}
.button {
/* Button base styles */
}
.button--primary {
/* Primary button styles */
}
まとめ
BEM記法を用いることで、CSSの管理が格段に楽になります。一貫性のある命名規則、メンテナンス性の向上、再利用性の向上など、多くのメリットがあります。是非、次のプロジェクトでBEM記法を取り入れてみてください。
ウェブ開発の効率と品質が向上すること間違いなしです。
![アバター画像](https://groworks.jp/wp-content/uploads/2024/02/cropped-cropped-avatar_img-55x55.png)
Groworks Inc.
ものづくりのまち燕三条にある三条ものづくり学校を拠点とし、新潟市、長岡市、燕市、柏崎市を中心に活動しているウェブサイト・ホームページ制作会社です。