Definición
CSS (Cascading Style Sheets) es el lenguaje que decide cómo se ve el HTML. Colores, tipos de letra, tamaños, espacios, posiciones y cómo cambia todo eso según el ancho de la pantalla.
La idea de fondo es la separación de responsabilidades: el HTML dice qué es cada cosa y el CSS dice cómo se ve. Cuando esa frontera se respeta, puedes rediseñar una web entera sin tocar el contenido.
Una regla de CSS tiene dos partes: un selector que dice a qué elementos se aplica, y un bloque de declaraciones con las propiedades y sus valores.
.precio {
font-size: 1.5rem;
color: #00e5ff;
}
La cascada y la especificidad
La primera C de CSS es de cascading, y es la parte que más quebraderos de cabeza da. Cuando varias reglas afectan al mismo elemento, gana una. El orden de desempate:
- Importancia:
!importantgana a todo lo demás. - Especificidad: cuanto más concreto es el selector, más pesa. Un
id(#precio) pesa más que una clase (.precio), y una clase más que una etiqueta (p). - Orden: a igual especificidad, gana la última que se declaró.
Aquí nace el error más común del oficio: cuando algo no se aplica, la tentación es poner !important. Funciona esa vez y crea el problema siguiente, porque a partir de ahí solo se puede pisar con otro !important. La solución correcta casi siempre es bajar la especificidad de la regla que estorba, no subir la de la tuya.
Colocar cosas: flexbox y grid
Durante años colocar elementos en CSS fue un sufrimiento de floats y trucos. Hoy hay dos herramientas hechas para eso y resuelven casi todo:
- Flexbox, para una dimensión: una fila o una columna. Ideal para barras de navegación, listas de botones, alinear un icono con su texto.
- Grid, para dos dimensiones: filas y columnas a la vez. Ideal para maquetar la página entera o una rejilla de tarjetas.
Con gap para separar, y ya no hacen falta márgenes que se colapsan ni se duplican.
Ejemplo práctico
En la web de IMDICA teníamos una rejilla de productos que se descuadraba en tablet. Estaba hecha con anchos en porcentaje y márgenes calculados a mano, y cada vez que se añadía una columna había que recalcularlo todo.
Sustituirlo por una línea de Grid con repeat(auto-fit, minmax(280px, 1fr)) resolvió el problema entero: la rejilla decide sola cuántas columnas caben según el ancho disponible, sin un solo media query.
Y una cosa que aprendí de la manera dura en esta misma web: un elemento con mx-auto dentro de un contenedor flex no se estira, se encoge al contenido. Una página salía 400 píxeles más estrecha que las demás con exactamente las mismas clases. No era un error de CSS: era CSS haciendo justo lo que dice la especificación. Media hora midiendo el árbol de elementos para encontrarlo.
Errores comunes
!importantcomo solución. Es deuda técnica inmediata.- Selectores kilométricos.
.contenedor .lista .item .titulo spanes imposible de pisar y frágil ante cualquier cambio de estructura. - Píxeles fijos para el texto. Usar
remrespeta el tamaño de letra que el usuario haya configurado en su navegador. Conpxlo ignoras. - No pensar en móvil desde el principio. Es más fácil ampliar que encoger: empieza por la pantalla pequeña.
- Definir un color solo dentro de un
@media. Si el otro caso no lo define, ahí se queda sin color. - Olvidar el foco del teclado. Quitar el
outlineporque "queda feo" deja la web inutilizable para quien navega con Tab. Si lo quitas, pon otro visible.
Cuándo usarlo
Siempre, aunque uses Tailwind, Bootstrap o cualquier otra cosa: todos generan CSS por debajo, y cuando algo no encaja hay que entender la cascada para arreglarlo.
Lo que sí ha cambiado es cuánto CSS escribes a mano. Con un sistema de utilidades escribes muchas menos reglas propias, pero necesitas entender exactamente lo mismo.
