1. Por qué el CSS se descontrola
Escribir CSS es fácil; mantenerlo no. En un proyecto que crece, las reglas se acumulan, los selectores se hacen cada vez más específicos para ganar a los anteriores, aparecen colores y tamaños repetidos con pequeñas diferencias y nadie se atreve a borrar nada por miedo a romper otra página. El resultado es un sitio heterogéneo, justo lo contrario de lo que pide este módulo: interfaces con un aspecto coherente en todas sus pantallas.
Las herramientas de este tema atacan el problema desde tres frentes: las variables CSS centralizan las decisiones de diseño, los preprocesadores como Sass organizan el código en ficheros y permiten reutilizarlo, y las metodologías como BEM ponen orden en los nombres de las clases.
2. Variables CSS y temas
Las propiedades personalizadas (variables CSS) guardan un valor con nombre que se usa con var(). A diferencia de las variables de Sass, existen en el navegador: se heredan, se pueden redefinir en cualquier elemento y cambiar con JavaScript en tiempo real. Eso las hace perfectas para los temas: el modo oscuro no es otra hoja de estilos, sino otro juego de valores para las mismas variables.
1:root {
2 --fondo: #ffffff;
3 --texto: #111827;
4}
5
6/* El usuario prefiere modo oscuro y no ha elegido otra cosa */
7@media (prefers-color-scheme: dark) {
8 :root:not([data-tema="claro"]) { --fondo: #111827; --texto: #f9fafb; }
9}
10/* El usuario lo ha elegido con el botón de la web */
11[data-tema="oscuro"] { --fondo: #111827; --texto: #f9fafb; }
12
13body { background: var(--fondo); color: var(--texto); }Esta es exactamente la técnica que usa esta web: respeta la preferencia del sistema operativo y, si el usuario pulsa el botón de tema, un atributo en <html> manda sobre ella. JavaScript solo tiene que cambiar ese atributo y guardarlo para la próxima visita.
3. Preprocesadores: Sass
Un preprocesador es un lenguaje que amplía CSS y se compila a CSS normal antes de llegar al navegador. Sass (con su sintaxis SCSS, que es CSS con extras) es el más usado. Algunas de sus ventajas históricas ya existen en CSS moderno (las variables y, desde hace poco, el anidamiento), pero sigue siendo muy útil para organizar proyectos grandes.
| Característica | Qué aporta |
|---|---|
| Parciales y @use | Dividir los estilos en ficheros pequeños (_botones.scss, _tarjetas.scss) que se combinan en uno |
| Anidamiento y & | Escribir los estilos de un componente juntos: &:hover, &__titulo, &--destacada |
| Mixins | Bloques de estilos reutilizables con parámetros, como una media query o un botón |
| Funciones y bucles | Generar escalas de colores o clases de espaciado automáticamente |
1@use "tokens" as t;
2
3@mixin desde($ancho) {
4 @media (min-width: $ancho) { @content; }
5}
6
7.tarjeta {
8 border: 1px solid t.$borde;
9 border-radius: t.$radio;
10
11 &__titulo { font-size: t.$texto-l; }
12 &--destacada { border-color: t.$primario; }
13
14 @include desde(40rem) {
15 display: grid;
16 grid-template-columns: 200px 1fr;
17 }
18}Sass se compila con su herramienta de línea de comandos (sass --watch scss:css) o, en proyectos con Vite, simplemente instalando el paquete sass: Vite compila los ficheros .scss que importes.
4. Metodologías y frameworks
BEM: nombres que explican la estructura
BEM (Bloque, Elemento, Modificador) es una convención de nombres. El bloque es un componente independiente (tarjeta), el elemento es una parte que solo tiene sentido dentro de él (tarjeta__titulo) y el modificador es una variante (tarjeta--destacada). Todos los selectores son una sola clase, con la misma especificidad baja, así que no hay batallas de especificidad; y al leer el HTML se entiende qué pertenece a qué.
BEM es como el nombre de las piezas de un mueble
Frameworks de CSS
Los frameworks dan hecha una base de estilos y componentes. Los hay de dos filosofías: los de componentes, como Bootstrap, que ofrecen clases como btn btn-primary o card listas para usar; y los de utilidades, como Tailwind CSS (el que usa esta web), que ofrecen clases pequeñas de una sola propiedad (flex, p-4, text-lg) que se combinan en el HTML.
| Bootstrap | Tailwind CSS | |
|---|---|---|
| Enfoque | Componentes prediseñados | Utilidades de una propiedad |
| Velocidad al empezar | Muy rápida | Rápida una vez aprendidas las clases |
| Aspecto final | Se reconoce fácilmente si no se personaliza | Totalmente propio |
| CSS resultante | Todo el framework (salvo que se recorte) | Solo las clases que usas |
- Un framework no sustituye saber CSS: cuando algo no encaja, hay que entender qué hace por debajo.
- Elige uno y úsalo de forma consistente; mezclar varios es la receta para el caos.
Componentes, no páginas
5. Retos
En el primero editas el CSS para crear un sistema de temas con variables; en el segundo escribes el HTML de un componente siguiendo BEM a partir de su hoja de estilos.
Define en :root las variables --fondo (#ffffff), --texto (#111827) y --borde (#d1d5db), y haz que cuando <html> tenga el atributo data-tema="oscuro" pasen a #111827, #f9fafb y #374151. .panel debe usar las tres variables para su fondo, su color de texto y un borde de 1px sólido. Así, cambiar de tema es cambiar un solo atributo.
El CSS del componente tarjeta ya está escrito con la metodología BEM. Escribe el HTML de dos tarjetas dentro de .tarjetas: cada una es un <article class="tarjeta"> con una imagen (tarjeta__imagen, con alt), un título <h3> (tarjeta__titulo), un párrafo (tarjeta__texto) y un enlace (tarjeta__boton). La segunda tarjeta es la destacada: añádele el modificador tarjeta--destacada.