Jesús Solaz, sobre fundamentos de CSS
El CSS es la parte que todo el mundo cree entender hasta que cambia un color y no pasa nada. Entonces aparece la palabra que lo explica casi todo: especificidad.
CSS son las siglas de Cascading Style Sheets, hojas de estilo en cascada. Es el lenguaje que decide cómo se ve lo que el HTML ha estructurado: colores, tipografías, tamaños, espacios y posición de cada elemento.
La palabra clave del nombre es cascada, y es la que explica el noventa por ciento de los momentos de desesperación de quien empieza.
Una regla de CSS tiene dos partes: a quién afecta y qué le hace.
h1 { color: white; font-size: 42px; }
Eso significa: a todos los h1, ponles el texto blanco y el tamaño a 42 píxeles. La primera parte es el selector; lo de dentro de las llaves, las declaraciones.
p afecta a todos los párrafos..destacado afecta a los elementos con class="destacado". Es la forma habitual y la más flexible.#cabecera afecta al elemento con id="cabecera", que debe ser único.Cuando dos reglas dicen cosas distintas sobre lo mismo, el navegador tiene que elegir. Y no elige la última que hayas escrito: elige la más específica.
El orden, de menos a más fuerza:
| Selector | Fuerza | Ejemplo |
|---|---|---|
| Etiqueta | Baja | p |
| Clase | Media | .aviso |
| Identificador | Alta | #cabecera |
| Estilo en línea | Muy alta | style="…" |
!important | Rompe el orden | color: red !important |
Por eso cambiar p { color: white } no hace nada si en otro sitio hay un .contenido p { color: gray }: la segunda es más específica y gana, esté donde esté en el archivo.
El !important parece la solución y es el problema. Cada vez que se usa para tapar un conflicto, el siguiente conflicto necesitará otro. Al cabo de un tiempo la hoja de estilos es una guerra de importantes que nadie se atreve a tocar.
color para el color de la letra, font-size para el tamaño, font-weight para el grosor, line-height para el espacio entre líneas. Esta última es la más olvidada y la que más cambia la legibilidad: un cuerpo de texto respira con 1,6 o 1,7 y se ahoga con 1,2.
margin es el espacio por fuera del elemento; padding, el de dentro. Confundirlos es el rito de iniciación de todo el mundo. Truco: el padding se pinta del color de fondo del elemento, el margin no.
display: flex resuelve hoy la mayoría de las alineaciones que antes requerían trucos. Para rejillas de tarjetas, display: grid. Con esas dos y un poco de gap se monta casi cualquier maquetación moderna.
Las media queries aplican reglas solo a partir de cierto ancho:
@media (max-width: 600px) { .columnas { display: block; } }
Es decir: en pantallas de menos de 600 píxeles, las columnas se apilan. Conviene diseñar pensando primero en el móvil y añadir después lo que cambia en pantallas grandes, no al revés.
Define los colores y las tipografías del sitio una sola vez, arriba del todo, como variables:
:root { --color-texto: #d4d4d4; --color-fondo: #000; }
Y úsalas siempre a partir de ahí. El día que haya que cambiar el gris del cuerpo de texto se cambia en un sitio y no en trescientos. Esta web funciona exactamente así, y por eso pasar todo el sitio de un tema azul a uno negro fue posible sin tocar cada página.
Casi siempre por una de tres razones: hay otra regla más específica ganando, hay un !important por medio, o el navegador tiene la hoja antigua en caché. Se comprueba en un minuto con las herramientas de desarrollo del navegador.
Un framework acelera muchísimo el arranque y garantiza que todo se vea decente en móvil. El precio es cargar mucho código que no usas y acabar con webs que se parecen entre sí. Para un proyecto pequeño con diseño propio, CSS a mano suele salir más limpio.
Jesús Solaz
Empresario tecnológico y creador de software
