プログラムを「オブジェクト（部品）」として分割し、それらを組み合わせて構築する考え方。

CSS においては、スタイルを小さな再利用可能なコンポーネント（モジュール）として設計し、柔軟性と保守性を高めることを指す

CSS の命名規則とオブジェクト指向 CSS（OOCSS）

• 構造と見た目の分離：スタイルを HTML タグに直接適用せず、クラスを使用して管理する。
• モジュール化：CSS クラスの再利用を増やし、冗長なコードを削減する。

.green {
color: green;
}
.bold {
font-weight: bold;
}

<p class=”green bold”>これは緑色で太字の段落です</p>

BEM は CSS のクラス命名規則の 1 つで、「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の 3 つの概念に基づいている。

• • Block（ブロック）
    • 独立したコンポーネント（例: button, card）
  • Element（エレメント）
    • ブロックの一部として機能する要素（例: button__icon, card__title）
  • Modifier（モディファイア）
    • バリエーションを作るための修飾（例: button--primary, card--shadow）

例

.button {
background: blue;
color: white;
}
.button–primary {
background: green;
}
.button__icon {
margin-right: 5px;
}

<button class=”button button–primary”>
<span class=”button__icon”>🔍</span> 検索
</button>