Curso HTML 13.5 Uso semántico de clases en lugar de nombres genéricos

Uso semántico de clases en lugar de nombres genéricos

Asignar nombres de clase semánticos significa describir el propósito, la función o el contenido del elemento en lugar de su apariencia visual. Esto mejora la mantenibilidad, legibilidad y facilita el trabajo en equipo.

1. ¿Por qué evitar nombres genéricos?

• Reutilización limitada: .box o .item no dicen para qué sirve ese contenedor.
• Escalabilidad: Cuando el proyecto crece, es difícil distinguir las cajas unas de otras.
• Colaboración: Un nuevo desarrollador no sabe qué estilo aplicar sin leer el CSS.

2. Principios de nomenclatura semántica

1. Usar nombres en forma de sustantivo o frase nominal que describa la función: .alert, .user-profile.
2. Evitar adjetivos o colores como parte de la clase: .rojo o .grande.
3. Mantener consistencia: elegir un estilo (kebab-case, BEM) y respetarlo.
4. Separar estructura, estado y tema: .card (bloque), .card--highlighted (modificador), .card__header (elemento).

3. Metodologías recomendadas

4. Ejemplos prácticos

4.1. De nomenclatura genérica a semántica

Mal:

<div class='box highlight'>
  <h2>Título</h2>
  <p>Contenido informativo.</p>
</div>
  

Bien:

<article class='card card--highlighted'>
  <h2 class='card__title'>Título</h2>
  <p class='card__body'>Contenido informativo.</p>
</article>
  

4.2. Menú de navegación accesible

Mal:

<ul class='list list-inline'>
  <li class='item'><a href='/'>Inicio</a></li>
  <li class='item active'><a href='/about'>Acerca</a></li>
</ul>
  

Bien:

<nav class='navigation-menu' aria-label='Principal'>
  <ul class='navigation-menu__list'>
    <li class='navigation-menu__item'>
      <a href='/' class='navigation-menu__link'>Inicio</a>
    </li>
    <li class='navigation-menu__item navigation-menu__item--current'>
      <a href='/about' class='navigation-menu__link'>Acerca</a>
    </li>
  </ul>
</nav>
  

4.3. Formulario con clases orientadas a la función

Mal:

<form class='f'>
  <div class='r'>
    <label class='l'>Email</label>
    <input class='i' type='email' />
  </div>
  <button class='btn-red'>Enviar</button>
</form>
  

Bien:

<form class='form form--compact'>
  <div class='form__group'>
    <label for='email' class='form__label'>Email</label>
    <input id='email' name='email' type='email' class='form__control' />
  </div>
  <button type='submit' class='button button--primary'>Enviar</button>
</form>
  

5. Ventajas finales

• Claridad: Queda claro el propósito de cada clase.
• Mantenibilidad: Cambios de estilo sin renombrar clases por toda la app.
• Accesibilidad y ARIA: Facilita mapear clases a roles y estados.
  Ejemplo: aria-expanded='true' junto a .accordion--open.
• Integración con JavaScript: Seleccionar nodos por función: document.querySelector('.modal--active').