Aplicar estilos con clases en HTML

Las clases son uno de los mecanismos más importantes para aplicar estilos en CSS. Nos permiten identificar y estilizar elementos específicos de manera reutilizable.

¿Qué es una clase?

Una clase es un atributo que podemos añadir a cualquier elemento HTML para identificarlo y poder aplicarle estilos específicos desde CSS.

<!-- Elemento sin clase -->
<section>Contenido</section>

<!-- Elemento con clase -->
<section class="jobs-search">Contenido</section>

El selector de clase en CSS: .

En CSS, usamos el punto . seguido del nombre de la clase para seleccionar elementos que tengan esa clase:

/* El punto indica que estamos seleccionando una CLASE */
.jobs-search {
  background: white;
  padding: 20px;
}

El punto . es fundamental: indica que estamos seleccionando por clase. Más adelante veremos otros selectores como el # para IDs.

Diferencia entre elemento y clase

/* Selecciona TODOS los <section> */
section {
  background: gray;
}

/* Selecciona SOLO los elementos con class="jobs-search" */
.jobs-search {
  background: white;
}

Ejemplo práctico: Sección de búsqueda de empleos

Vamos a ver un ejemplo completo de cómo usar clases para estilizar una sección de búsqueda.

HTML

<section class="jobs-search">
  <h1>Encuentra tu próximo trabajo</h1>
  <p>Explora miles de oportunidades en el sector tecnológico.</p>

  <form role="search">
    <div class="search-bar">
      <!-- svg -->

      <input required type="text" placeholder="Buscar trabajos, empresas o habilidades" />
    </div>

    <div class="search-filters"><-- selección de filtros ></div>
  </form>
</section>

CSS

.jobs-search {
  margin: 0;
  padding: 0;
  height: auto !important;

  h1 {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
  }

  p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }

  .search-bar {
    background: var(--input-bg);
    padding: 0.25rem 0.5rem;
  }

  .search-filters {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }

  form {
    width: 100%;
    max-width: 1280px;
  }

  form div {
    background: none;
    box-shadow: none;
    padding: 0;
  }
}

Analizando el código

1. Clase principal: .jobs-search

.jobs-search {
  margin: 0;
  padding: 0;
  height: auto !important;
}

Esta clase se aplica a la sección completa. Todos los estilos dentro de este bloque afectarán a elementos dentro de .jobs-search.

2. CSS Nesting para elementos hijos

.jobs-search {
  /* Estilos para la sección */

  h1 {
    /* Solo afecta a los h1 DENTRO de .jobs-search */
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
  }

  p {
    /* Solo afecta a los p DENTRO de .jobs-search */
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }
}

Gracias al CSS Nesting, estos estilos solo se aplican a <h1> y <p> que estén dentro de .jobs-search, no a todos los de la página.

3. Clases específicas para componentes

.jobs-search {
  .search-bar {
    /* Estilos para el contenedor del input de búsqueda */
    background: var(--input-bg);
    padding: 0.25rem 0.5rem;
  }

  .search-filters {
    /* Estilos para el contenedor de filtros */
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
}

Las clases .search-bar y .search-filters nos permiten aplicar estilos específicos a partes concretas de nuestra sección.

Ventajas de usar clases

1. Reutilización

Puedes aplicar la misma clase a múltiples elementos para asegurar la consistencia en el diseño:

<button class="btn-primary">Enviar</button>
<button class="btn-primary">Guardar</button>
<button class="btn-primary">Continuar</button>

.btn-primary {
  background: blue;
  color: white;
  padding: 10px 20px;
}

2. Especificidad controlada

Las clases te dan control sobre qué elementos estilizar sin afectar todos los elementos de ese tipo:

<p>Este párrafo es normal</p>
<p class="highlight">Este párrafo está destacado</p>
<p>Este párrafo es normal</p>

.highlight {
  background: yellow;
  font-weight: bold;
}

3. Múltiples clases en un elemento

Un elemento puede tener múltiples clases separadas por espacios:

<!-- Elemento con tres clases -->
<button class="btn btn-primary btn-large">Comprar ahora</button>

.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: blue;
  color: white;
}

.btn-large {
  font-size: 1.2rem;
  padding: 15px 30px;
}

Y usando CSS Nesting, podemos organizar mejor los estilos:

.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &.btn-primary {
    background: blue;
    color: white;
  }

  &.btn-large {
    font-size: 1.2rem;
    padding: 15px 30px;
  }
}

Consejos para nombrar clases

Más adelante veremos que existen nomenclaturas de clases, como BEM, para mantener los selectores organizados y evitar conflictos.

Nombres descriptivos

/* ❌ Mal: nombres poco descriptivos */
.box1 {
}
.rojo {
}
.grande {
}

/* ✅ Bien: nombres descriptivos */
.card {
}
.btn-primary {
}
.search-bar {
}

Selectores de clase con CSS Nesting

El CSS Nesting hace el código más legible y organizado:

/* Sin nesting */
.jobs-search {
}
.jobs-search h1 {
}
.jobs-search p {
}
.jobs-search .search-bar {
}
.jobs-search .search-filters {
}

/* Con nesting (más organizado) */
.jobs-search {
  /* Estilos de la sección */

  h1 {
    /* Estilos del título */
  }

  p {
    /* Estilos del párrafo */
  }

  .search-bar {
    /* Estilos de la barra de búsqueda */
  }

  .search-filters {
    /* Estilos de los filtros */
  }
}

Variables CSS en el ejemplo

Observa cómo en el ejemplo usamos variables CSS:

.jobs-search {
  p {
    color: var(--text-muted); /* Variable CSS */
  }

  .search-bar {
    background: var(--input-bg); /* Variable CSS */
  }
}

Las variables CSS (custom properties) se definen con -- y se usan con var():

:root {
  --text-muted: #666;
  --input-bg: #f5f5f5;
}

.jobs-search {
  p {
    color: var(--text-muted); /* Usa la variable */
  }
}

Para terminar con las clases

• Las clases se definen en HTML con class="nombre-clase"
• En CSS, las clases se seleccionan con el punto .nombre-clase
• Puedes aplicar múltiples clases a un elemento separadas por espacios
• Las clases son reutilizables y pueden aplicarse a muchos elementos
• CSS Nesting hace el código más organizado y legible
• Usa nombres descriptivos en inglés y con guiones (kebab-case)

Las clases son la herramienta fundamental para aplicar estilos en CSS. ¡Dominarlas es esencial para crear sitios web profesionales!