CSS BEM コーディングとは …
CSS BEM コーディングとは、「Block, Element, Modifier」の略で、CSSクラス名の命名規則を指す手法の一つです。BEMは、コードの可読性を向上させ、CSSの構造を明確にし、大規模なプロジェクトやチーム開発において管理しやすくするために使われます。この方法は、再利用性が高く、コンポーネントベースの開発に非常に適しています。
BEMの3つの基本要素
- Block(ブロック):
- ページ内で独立して存在できる意味的に独立したコンポーネントです。ナビゲーションバー、ボタン、フォームなどが例です。
- 例:
nav
,button
,form
- Element(エレメント):
- ブロックの一部であり、ブロックと意味的に関連するものです。エレメントはブロックの一部として定義され、単独では意味を持ちません。
- 例:
button__icon
,nav__item
,form__input
- Modifier(モディファイア):
- ブロックやエレメントの外観や動作を変更するためのクラスです。たとえば、ボタンの色やサイズ、ナビゲーションバーの表示状態などを変更します。
- 例:
button--large
,nav__item--active
,form__input--error
BEMの命名規則
- ブロック:
block
- エレメント:
block__element
- モディファイア:
block--modifier
またはblock__element--modifier
具体例
htmlコードをコピーする<div class="card">
<div class="card__header">
<h2 class="card__title">Title</h2>
</div>
<div class="card__content">
<p class="card__text">Some content here</p>
</div>
<button class="card__button card__button--primary">Click me</button>
</div>
card
はブロックcard__header
,card__title
,card__content
,card__button
はエレメントcard__button--primary
はモディファイア
BEMは、このようにCSSクラスを構造化し、クラス名がその役割を説明するため、直感的で保守しやすいコードが書けるようになります。
Recent posts
Category
- reference (2)
- sourcecode (6)
- weblog (11)