Convenciones de nombres CSS: BEM, OOCSS, SMACSS comparados
Nombrar clases CSS puede parecer trivial, pero en grandes bases de código se convierte en una de las decisiones arquitectónicas más importantes. Una buena convención de nombres previene guerras de especificidad, reduce colisiones de nombres y hace que las hojas de estilo se autodocumenten.
Por qué importa la nomenclatura CSS
CSS tiene un espacio de nombres global. Cada nombre de clase está disponible en todas partes, y las reglas de especificidad determinan qué estilos ganan. Sin una convención de nombres, los equipos inevitablemente crean conflictos: dos desarrolladores nombran su clase .card, y uno sobrescribe al otro.
BEM (Block Element Modifier)
BEM es la convención de nombres CSS más ampliamente adoptada. Usa un patrón estructurado:
.block {}
.block__element {}
.block--modifier {}
/* Ejemplo */
.card {}
.card__title {}
.card__image {}
.card--featured {}
.card__title--large {}Reglas de BEM
- Bloque: Un componente independiente. Nombrado en kebab-case:
.search-form,.nav-bar. - Elemento: Una parte del bloque sin significado independiente. Separador de doble guion bajo:
.search-form__input. - Modificador: Una variante o estado de un bloque/elemento. Separador de doble guion:
.search-form--dark.
Beneficios de BEM
- Autodocumentado:
.card__title--highlightedte dice exactamente qué es - Baja especificidad: todo es un selector de clase simple
- Sin colisiones de nombres: el nombre del bloque delimita todo
- Agnóstico de framework: funciona con cualquier stack tecnológico
OOCSS (CSS Orientado a Objetos)
OOCSS separa estructura de apariencia y contenedor de contenido:
/* Estructura */
.media { display: flex; align-items: start; }
.media__body { flex: 1; }
/* Apariencia */
.theme-dark { background: #333; color: #fff; }
.theme-light { background: #fff; color: #333; }OOCSS crea objetos de utilidad altamente reutilizables, pero puede resultar en muchas clases en un solo elemento HTML.
SMACSS (Arquitectura Escalable y Modular)
SMACSS categoriza las reglas CSS en cinco tipos con prefijos:
| Categoría | Prefijo | Ejemplo |
|---|---|---|
| Base | ninguno | html, body, h1 |
| Layout | l- | .l-sidebar |
| Módulo | ninguno | .card |
| Estado | is- | .is-active |
| Tema | t- | .t-dark |
CSS Modules y CSS-in-JS
Frameworks modernos como React ofrecen alternativas que resuelven las colisiones de nombres a nivel de herramientas:
- CSS Modules: Delimita automáticamente los nombres de clase. Escribes
.title, la herramienta de build produce.Card_title_x7kd2. Usa camelCase para los nombres de clase ya que se convierten en propiedades JavaScript. - Tailwind CSS: Usa clases de utilidad, eliminando por completo la nomenclatura personalizada.
- styled-components / Emotion: CSS-in-JS con nombres de clase autogenerados.
¿Cuál deberías elegir?
| Enfoque | Mejor para |
|---|---|
| BEM | CSS tradicional, equipos multi-desarrollador, temas CMS |
| CSS Modules | Proyectos basados en componentes React/Vue/Svelte |
| Tailwind | Prototipado rápido, flujos de trabajo utility-first |
| SMACSS | Grandes bases de código legacy que necesitan organización |
Convierte tus nombres de clase
Las clases CSS siempre usan kebab-case. Convierte desde otros formatos con nuestro conversor kebab-case. Si necesitas camelCase para CSS Modules, prueba el conversor camelCase o el hub de conversión de case.