✨ 無料・登録不要

BEM命名アシスト

Block / Element / Modifier を入力してBEMクラス名を自動生成

このツールをシェア

Block名（例: card, header, contactForm）

Element名（カンマ区切り）

Modifier（キー_値形式）

生成結果

上のフォームを入力して「クラス名を生成」をクリックしてください。

このツールについて

BEM命名アシストは、BEMルールに沿ったクラス名の候補を無料で自動生成できるツールです。登録不要・ブラウザ完結で、入力データがサーバーに送信されることはありません。

🏷️

Block/Element/Modifier生成

コンポーネント名からBEMクラス名を自動提案

✅

命名ルールチェック

入力したクラス名がBEM規約に準拠しているか検証

🚀

完全無料・登録不要

会員登録なしで今すぐ利用可能

使い方

ブロック名を入力する

コンポーネントのブロック名（例: header, card, form）を入力します。

エレメントを追加する

ブロック内の要素（Element）をカンマ区切りで追加し、BEM形式のクラス名を生成します。

モディファイアを設定する

必要に応じてモディファイア（状態やバリエーション）を追加します。

コピーして使用する

生成されたクラス名をワンクリックでコピーし、CSS/HTMLに貼り付けます。

よくある質問

無料ですか？

はい、完全無料です。会員登録も不要で、すべての機能を制限なくご利用いただけます。

データは安全ですか？

すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。

BEMとは何ですか？

BEMはBlock・Element・Modifierの略で、CSSクラス名の命名規約です。コードの保守性と再利用性を高めるために広く使われています。

モディファイアの書き方に決まりはありますか？

本ツールでは「block__element_key_value」形式を採用しています。例えば「button_type_primary」「button_state_disabled」のようにキーと値をアンダースコアでつなぎます。

Tailwind CSSと併用できますか？

BEMは主にSCSSや従来のCSSで使われますが、Tailwindと併用するプロジェクトもあります。その場合、コンポーネント単位の抽象化にBEMを活用できます。