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

データは安全ですか？

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

BEMとは何ですか？

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

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

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

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

Block/Element/Modifier生成

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

命名ルールチェック

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

完全無料・登録不要

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

フロントエンドエンジニア

BEM命名規則に沿ったクラス名を素早く生成したいとき

Block/Element/Modifierを入力するだけでBEM準拠のクラス一覧を自動生成

Webデザイナー

コンポーネント設計時にBEMクラス名の候補が欲しいとき

HTML例・SCSSテンプレートも同時に出力してコーディングを効率化

コーダー

既存クラス名がBEM規約に準拠しているか確認したいとき

命名ルールチェックで規約違反を自動検出

無料ですか？: はい、完全無料です。会員登録も不要で、すべての機能を制限なくご利用いただけます。
データは安全ですか？: すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。
BEMとは何ですか？: BEMはBlock・Element・Modifierの略で、CSSクラス名の命名規約です。コードの保守性と再利用性を高めるために広く使われています。
モディファイアの書き方に決まりはありますか？: 本ツールでは「block__element_key_value」形式を採用しています。例えば「button_type_primary」「button_state_disabled」のようにキーと値をアンダースコアでつなぎます。
Tailwind CSSと併用できますか？: BEMは主にSCSSや従来のCSSで使われますが、Tailwindと併用するプロジェクトもあります。その場合、コンポーネント単位の抽象化にBEMを活用できます。