Uso del atributo class en HTML

El atributo class te permite agrupar elementos HTML y asignarles estilos o comportamientos específicos. Es esencial para usar CSS y JavaScript de forma efectiva.

¿Qué es el atributo class?

Una clase es un nombre que asignas a un elemento. Basado en este nombre, el elemento puede asociarse con uno o más estilos o funciones. Puedes referenciarlo en tu código CSS o JavaScript.

<p class="highlight">This is a highlighted paragraph.</p>

Aplicar class a múltiples elementos

El atributo class te permite asignar el mismo estilo o comportamiento a varios elementos similares — por ejemplo, para dar a varias cajas la misma apariencia.

<div class="card">
  <h2 class="card-title">Product Title</h2>
  <p class="card-description">Short product description.</p>
</div>

Uso de múltiples clases en un solo elemento

Puedes asignar múltiples clases a un solo elemento HTML separándolas con espacios. De este modo, un párrafo puede ser rojo y negrita, por ejemplo.

<p class="text-bold text-red">Important message</p>

Reusabilidad

El atributo class es reutilizable — puedes aplicarlo a muchos elementos sin repetir estilos manualmente, lo cual hace tu código más eficiente y consistente.

Nombrar clases

Usa nombres significativos y claros para las clases, como .nav-bar o .card-title. Evita nombres vagos o genéricos.

<div class="navigation-bar">
  <a class="nav-item" href="#">Home</a>
  <a class="nav-item" href="#">About</a>
</div>

Conexión entre class y CSS

El propósito principal del atributo class es vincular HTML con CSS. Si el nombre de clase coincide con uno definido en el archivo CSS, el elemento adoptará automáticamente los estilos definidos.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<p class="highlight">This paragraph is styled using a class.</p>

Combinar múltiples clases

Cuando asignas múltiples clases a un elemento, hereda estilos de todas ellas. Por ejemplo, un botón puede ser grande, colorido y con borde — cada clase agrega una regla de estilo diferente.

<style>
  .btn {
    padding: 10px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<button class="btn btn-primary">Click me</button>

Convención de nombres BEM

BEM (Bloque Elemento Modificador) es una convención popular de nombres para clases que promueve claridad y reutilización. Por ejemplo: card__title o card--featured. El doble guion bajo es para elementos, el doble guion para modificadores.

<div class="card card--featured">
  <h2 class="card__title">Article Title</h2>
  <p class="card__text">Some text here.</p>
</div>

Consejos para usar class

Evita nombres de clase largos o confusos. Mantén una nomenclatura consistente (como kebab-case), y no uses palabras reservadas de CSS. Piensa en la reutilización — una clase bien nombrada puede aplicarse a muchos componentes.

Modificar class dinámicamente con JavaScript

Puedes modificar el atributo class usando JavaScript. El objeto classList te permite agregar, quitar o verificar clases en un elemento de forma dinámica.

<script>
  document.querySelector("p").classList.add("new-style");
</script>