La Cascada CSS y Clases

1. Diferencia entre clases e identificadores

Clases: Se pueden reutilizar en múltiples elementos. Se usan con punto (.clase)
IDs: Deben ser únicos en la página. Se usan con almohadilla (#id). Tienen mayor especificidad

/* Clase - reutilizable */
.boton {
padding: 10px;
background: blue;
}

/* ID - único */
#encabezado-principal {
font-size: 24px;
}

<button class="boton">Aceptar</button>
<button class="boton">Cancelar</button>


<header id="encabezado-principal">...</header>

2. Sintaxis

En CSS: Se escribe con un punto seguido del nombre (.nombre-clase)
En HTML: Se usa el atributo class="nombre-clase"

/* Declaración en CSS */
.mi-clase {
color: red;
}

<p class="mi-clase">Este texto será rojo</p>

3. Aplicación a elementos HTML: clases únicas y múltiples

Clase única: Un elemento con una sola clase
Múltiples clases: Un elemento puede tener varias clases separadas por espacios

<div class="contenedor">...</div>

<button class="boton boton-grande boton-primario">Enviar</button>

.boton {
  padding: 10px;
  border: none;
}

.boton-grande {
  font-size: 18px;
}

.boton-primario {
  background: blue;
  color: white;
}

4. Selectores de clase

Qué es: Formas de seleccionar elementos usando sus clases

/* Clase simple */
.tarjeta {
border: 1px solid gray;
}

/* Elemento con clase específica */
div.tarjeta {
padding: 20px;
}

/* Descendientes con clase */
.contenedor .tarjeta {
margin: 10px;
}

5. Combinación de selectores de clase

Sin espacio (.clase1.clase2): Elemento que tiene AMBAS clases
Con espacio (.clase1 .clase2): Elemento con clase2 que es descendiente de elemento con clase1

/* Elemento con AMBAS clases */
.boton.activo {
background: green;
}


<button class="boton activo">Click</button>


<button class="boton">Click</button>
<button class="activo">Click</button>

/* Descendiente con clase */
.menu .item {
display: block;
}


<nav class="menu">
<a class="item">Inicio</a>
</nav>

6. Pseudo-clases aplicadas a clases

Qué son: Combinación de selectores de clase con pseudo-clases para aplicar estilos en estados específicos

/* Hover sobre elemento con clase */
.boton:hover {
background: darkblue;
}

/* Focus en inputs con clase */
.campo-texto:focus {
border-color: blue;
}

/* Primer elemento con clase */
.item:first-child {
margin-top: 0;
}

/* Elementos pares con clase */
.fila:nth-child(even) {
background: lightgray;
}

7. Convenciones de nombre

BEM: Block Element Modifier (.bloque__elemento--modificador)
kebab-case: Palabras separadas por guiones (.mi-clase-ejemplo)
camelCase: Primera palabra minúscula, resto capitalizadas (.miClaseEjemplo)

/* BEM (Block Element Modifier) */
.tarjeta { } /* Bloque */
.tarjeta__titulo { } /* Elemento */
.tarjeta__boton { } /* Elemento */
.tarjeta--destacada { } /* Modificador */


<div class="tarjeta tarjeta--destacada">
<h2 class="tarjeta__titulo">Título</h2>
<button class="tarjeta__boton">Leer más</button>
</div>

/* kebab-case (recomendado en CSS) */
.boton-principal { }
.menu-navegacion { }
.contenedor-principal { }

/* camelCase (menos común en CSS) */
.botonPrincipal { }
.menuNavegacion { }
.contenedorPrincipal { }

8. Clases reutilizables

Qué son: Clases diseñadas para aplicarse a múltiples elementos diferentes, promoviendo la reutilización de código

/* Clases reutilizables para espaciado */
.margen-arriba {
margin-top: 20px;
}

.padding-grande {
padding: 30px;
}

/* Clases reutilizables para texto */
.texto-centrado {
text-align: center;
}

.texto-grande {
font-size: 24px;
}

<h1 class="texto-centrado texto-grande">Título</h1>
<p class="texto-centrado">Párrafo</p>
<div class="margen-arriba padding-grande">Contenido</div>

9. Utility classes vs Semantic classes

Utility classes: Clases de una sola función (hacen una cosa específica)
Semantic classes: Clases que describen el propósito o significado del elemento

/* UTILITY CLASSES - función específica */
.texto-rojo {
  color: red;
}

.flex {
  display: flex;
}

.oculto {
  display: none;
}

/* SEMANTIC CLASSES - significado/propósito */
.mensaje-error {
  color: red;
  border: 1px solid red;
  padding: 10px;
}

.boton-enviar {
  background: green;
  color: white;
  padding: 12px 24px;
}

<p class="texto-rojo">Mal uso</p>


<p class="mensaje-error">Mejor uso</p>


<div class="mensaje-error flex texto-centrado">Error</div>

10. Interacción con JavaScript

Qué es: Las clases son la forma recomendada de manipular estilos con JavaScript, usando classList

/* CSS */
.activo {
  background: blue;
  color: white;
}

.oculto {
  display: none;
}

// JavaScript - Añadir clase
elemento.classList.add('activo');

// Quitar clase
elemento.classList.remove('activo');

// Alternar clase (toggle)
elemento.classList.toggle('oculto');

// Verificar si tiene clase
if (elemento.classList.contains('activo')) {
console.log('Está activo');
}

<button class="boton js-abrir-modal">Abrir</button>

// JavaScript
document.querySelector('.js-abrir-modal').addEventListener('click', ...);

11. Buenas y malas prácticas

Buenas prácticas: Usar nombres descriptivos, evitar sobre-especificación, preferir clases sobre IDs para estilos
Malas prácticas: Nombres genéricos, clases basadas en estilos, sobre-especificación innecesaria

/* MAL - Nombres genéricos */
.texto { }
.boton { }

/* BIEN - Nombres específicos */
.descripcion-producto { }
.boton-enviar-formulario { }

/* MAL - Basado en estilos */
.texto-rojo {
color: red;
}

/* BIEN - Basado en propósito */
.mensaje-error {
color: red;
}

/* MAL - Sobre-especificación */
div.contenedor#principal .tarjeta {
padding: 20px;
}

/* BIEN - Solo lo necesario */
.tarjeta {
padding: 20px;
}

/* MAL - IDs para estilos (alta especificidad) */
#boton-enviar {
background: blue;
}

/* BIEN - Clases para estilos (reutilizable) */
.boton-enviar {
background: blue;
}

PARTE 2: Clases en CSS