BEMクラス簡単命名ツール

BEM（Block, Element, Modifier）とは、CSSのクラス名を一貫してわかりやすく管理するための命名規則です。大規模なプロジェクトでもクラス名がわかりやすく、保守しやすくなります。

• Block: ページの独立したコンポーネント（例: メニュー、ヘッダー）
• Element: Blockの内部にあり、特定の役割を持つ部分（例: メニューアイテム、ヘッダーロゴ）
• Modifier: BlockやElementのバリエーション（例: アクティブ状態、サイズや色の違い）

このツールを使うことで、BEM命名規則に基づいたクラスを簡単に作成できます。

このツールは、BEM命名規則でよく使われる単語をリストにして、それを選択することで命名されるようになっています。

• Block: ページの主要なコンポーネントとして命名
• Element: Block内の要素として命名
• Modifier: 状態やバリエーションを示すクラス名を追加

また、blockは選択リストに加えて、カスタムクラスを自由に入力して追記することもできます。

最後に、構成が出来上がったら、生成されたクラス名をコピーしてコーディングにお役立てください。