Curso HTML 16.1 Convenciones de nombrado para clases e IDs

Punto 16.1 Convenciones de nombrado para clases e IDs

En el desarrollo de proyectos web, adoptar convenciones de nombrado claras y consistentes para clases e id es clave para mantener el código legible, escalable y mantenible. A continuación se profundiza en sus fundamentos, metodologías más extendidas y ejemplos prácticos.

1. Principios básicos de nombrado

Significado claro: el nombre debe describir propósito o función (.btn-primary vs .red).
Minusculas y guiones: usar kebab-case (mi-clase-ejemplo) evita errores al usar selectores CSS.
Evitar selectores con elevado nivel de especificidad: no encadenar más de 3 selectores ni usar IDs para estilos comunes.
Modularidad: nombrado orientado a bloques o componentes, no a páginas específicas (.card en lugar de .home-card).
Único propósito: cada clase debería tener una única responsabilidad en estilos o comportamiento.

2. IDs vs Clases

	Clases	IDs
Reutilización	Alta: se pueden aplicar a múltiples elementos.	Baja: único por documento.
Especificidad	Media (`0,0,1,0`).	Alta (`0,1,0,0`), puede causar conflictos.
JavaScript	Se suelen usar para agrupar múltiples elementos.	Idóneo para búsqueda única rápida (`getElementById`).

3. Metodologías populares

BEM (Block Element Modifier)
Segmenta componentes en bloques, elementos y modificadores:
- Bloque: menu
- Elemento: menu__item
- Modificador: menu--collapsed
OOCSS (Object Oriented CSS)
Separa estructura y skin:
- Objeto de estructura: .o-media
- Objeto de skin (colores, bordes): .u-border-rounded
SMACSS (Scalable and Modular Architecture for CSS)
Organiza estilos en cinco categorías: Base, Layout, Module, State, Theme.

4. Kebab-case vs camelCase

Kebab-case (mi-clase-ejemplo) es estándar en HTML/CSS.
camelCase (miClaseEjemplo) a veces se usa en JS para manejar clases dinámicamente, pero puede confundir a CSS.
Se recomienda usar kebab-case uniformemente en nombres de clases e IDs.

5. Ejemplos prácticos

Ejemplo de componente card usando BEM:



  
  
    Título de la tarjeta
  
  
  
    Contenido principal...

Ejemplo de uso de IDs exclusivamente para interacción JS:



  Email:

6. Buenas prácticas y errores comunes

No usar nombres genéricos como .container en exceso; prefiera .layout-container o .page-header.
Evitar anidar selectores CSS más de dos niveles (.nav .item .link .icon es excesivo).
No mezclar metodologías en un mismo proyecto sin un criterio claro.
Documentar la convención elegida en el estilo guía del proyecto.

Con estas pautas y ejemplos se consigue un código más limpio, fácil de mantener y con estilos predecibles, evitando colisiones y reduciendo complejidad a medida que el proyecto crece.