CSSクラス命名チートシート - BEM規則

サイトプレビュー

パーツをクリックすると、クラス名の例が表示されます。各要素にホバーすると、ツールチップでクラス名の候補が表示されます（候補はランダムに順番で表示されます）。

ヒーロー / メインビジュアル

キャッチフレーズやメインメッセージ

コンテンツセクション

本文テキストエリア。ここに段落が入ります。画像と組み合わせてコンテンツを構成します。

複数の段落で説明文を記述することができます。

カード / ギャラリー

説明文

説明文

フォーム

ラベル:

お客様の声 / レビュー

"素晴らしいサービスです！"
- お客様名

実績 / パートナー

Logo1

Logo2

Logo3

Logo4

Logo5

Logo6

レイアウト / グリッド

<container> 全体を包む

<wrapper> 内側のラッパー

<grid> グリッドレイアウト

<grid__item>

<row> 行レイアウト

<col>

<flex> フレックスレイアウト

<flex__item>

ボタン / CTA

← 左側のパーツをクリックしてください

各パーツに適したBEM形式のクラス名が表示されます

Block（ブロック）
.block
独立した機能的なコンポーネント

Element（要素）
.block__element
ブロックの一部となる要素

Modifier（修飾子）
.block--modifier
.block__element--modifier
見た目や状態の変更