CSS記法学習アプリ - 社内研修用

🎯 BEMとは

BEM（Block Element Modifier）は、CSSのクラス命名規則の一つです。
コンポーネントベースの開発において、保守性と再利用性を高めるために考案されました。

🧱 Block（ブロック）

独立したコンポーネントの名前

.header

.navigation

.button

.card

🔗 Element（エレメント）

ブロックの中の子要素

.header__title

.navigation__item

.button__icon

.card__content

🎨 Modifier（モディファイヤー）

ブロックやエレメントの見た目・状態の変更

.button--primary

.button--large

.card--featured

.navigation--mobile

📋 一般的なBEM記法

/* 一般的なBEM記法例 */

.block { }                    /* ブロック */

.block__element { }           /* エレメント（アンダースコア2つ） */

.block--modifier { }          /* モディファイヤー（ハイフン2つ） */

.block__element--modifier { } /* エレメントのモディファイヤー */

/* 具体例 */

.card { }

.card__header { }

.card__title { }

.card--featured { }

.card__title--large { }

✨ 社内のカスタマイズBEM記法

一般的なBEMをベースに、より読みやすく、書きやすくカスタマイズした記法を採用しています：

/* 社内のカスタマイズBEM記法 */

.block { }               /* ブロック */

.block_element { }       /* エレメント（アンダースコア1つ） */

.block-modifier { }      /* モディファイヤー（ハイフン1つ） */

.is-state { }           /* 状態（is-接頭辞） */

.js-hookName { }        /* JavaScript制御用（js-接頭辞） */

/* 具体例 */

.card { }

.card_header { }

.card_title { }

.card-featured { }

.card.is-active { }

.card.js-toggleCard { }

📚 記法ルール

1. 英語を使用

○ .title

× .midashi
2. キャメル記法を使用

○ .globalNav

× .GlobalNav
3. ブロックには記号を含めない

○ .globalNav

× .global-nav
4. ブロックとエレメントはアンダースコア1つ

○ .panel_inner

× .panel__inner
5. モディファイヤー①：ハイフンつなぎ

○ .btn-primary

× .btn--primary
6. モディファイヤー②：is-, has-

○ .is-active

× .is_active
7. JS制御用クラス：js-接頭辞

○ .js-toggleMenu

× .js_toggle_menu

❌✅ よくある間違いと正解例

❌ 間違い	✅ 正解	理由
`.Global-Nav`	`.globalNav`	キャメル記法、記号不使用
`.sidebar__content`	`.sidebar_content`	アンダースコア1つでつなぐ
`.button--large`	`.btn-large`	モディファイヤーはハイフン1つ
`.is_open`	`.is-open`	状態系モディファイヤーはハイフン
`.js_toggle_menu`	`.js-toggleMenu`	JS制御クラスはjs-接頭辞
`.header--title`	`.header_title`	エレメントはアンダースコア1つ

🎯 BEMとは

🧱 Block（ブロック）

🔗 Element（エレメント）

🎨 Modifier（モディファイヤー）

📋 一般的なBEM記法

✨ 社内のカスタマイズBEM記法

📚 記法ルール

🧠 理解度チェッククイズ

❌✅ よくある間違いと正解例