Tmaeda13web

DesginCodingOperationsThrive

CSS BEM コーディングとは …

CSS BEM コーディングとは、「Block, Element, Modifier」の略で、CSSクラス名の命名規則を指す手法の一つです。BEMは、コードの可読性を向上させ、CSSの構造を明確にし、大規模なプロジェクトやチーム開発において管理しやすくするために使われます。この方法は、再利用性が高く、コンポーネントベースの開発に非常に適しています。

BEMの3つの基本要素

  1. Block(ブロック):
    • ページ内で独立して存在できる意味的に独立したコンポーネントです。ナビゲーションバー、ボタン、フォームなどが例です。
    • 例: nav, button, form
  2. Element(エレメント):
    • ブロックの一部であり、ブロックと意味的に関連するものです。エレメントはブロックの一部として定義され、単独では意味を持ちません。
    • 例: button__icon, nav__item, form__input
  3. 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
Archive
Category