Generador de nombres de clase BEM gratuito
El Generador de nombres de clase BEM construye nombres consistentes Bloque__Elemento--Modificador para que tu CSS sea predecible y sin colisiones. Escribe un bloque, añade elementos y modificadores, y copia la lista de clases terminada.
Cómo usarlo
Escribe un nombre de bloque, luego añade elementos y modificadores. El nombre de clase generado se actualiza en vivo y sigue la convención de nomenclatura BEM exactamente.
- Sigue la convención bloque__elemento--modificador
- Añade varios elementos y modificadores a la vez
- Maneja nombres de varias palabras con kebab-case
- Copia una sola clase o el conjunto completo
- Se ejecuta enteramente en tu navegador
¿Qué es BEM?
BEM significa Bloque, Elemento, Modificador. Un bloque es un componente independiente (tarjeta), un elemento es una parte de él (tarjeta__título) y un modificador cambia un estado o variante (tarjeta--destacada). El patrón mantiene la especificidad plana y los nombres auto-documentados.
Herramientas para desarrolladores relacionadas
También te puede interesar
Herramientas de otras categorías que suelen combinarse con Generador BEM: