Marc Semper Lloret
← CSS: diseño, maquetación y responsive

UD2 · Guía y taller práctico

Lo que debes recordar

El método

Ante cualquier problema de CSS, esta secuencia. No cambia con los años ni con las modas:

Cómo se ataca un problema de CSS
  1. ¿Qué tipo de problema es: tamaño, espacio, distribución o estado?
  2. Si es de distribución: ¿una dimensión o dos? Flexbox o Grid
  3. ¿Puede resolverse solo, con límites, en lugar de con un breakpoint?
  4. Si no se ve como esperabas: inspeccionar antes de escribir

La idea más importante

Si dentro de un año has olvidado las propiedades, que quede esta:

Cuando algo no se ve como esperabas, la respuesta no es añadir CSS. Es averiguar qué regla está actuando.

De ahí sale todo lo demás: por eso no usamos !important, por eso los selectores no se hacen más específicos «por si acaso», por eso DevTools está siempre abierto, y por eso distinguimos una regla tachada de una regla ausente.

Su propiedad complementaria, la que gobierna el layout:

Describe límites, no medidas

max-width en vez de width. minmax() en vez de un número de columnas. clamp() en vez de un tamaño fijo. Un diseño que declara límites se adapta solo; uno que declara medidas hay que arreglarlo en cada pantalla.

No memorices CSS

No necesitas recordar todas las propiedades. Tienes autocompletado, DevTools, documentación, buscadores e IA. Lo que necesitas es saber plantearte esto:

  • ¿Qué quiero seleccionar exactamente?
  • ¿Qué regla está actuando ahora, y por qué gana?
  • ¿Es un problema de tamaño, de espacio, de distribución o de estado?
  • ¿Una dimensión o dos?
  • ¿Necesito de verdad una media query, o puede adaptarse solo?
  • ¿Estoy usando un valor fijo sin una razón?
  • ¿Qué pasará cuando el contenido cambie?
  • ¿Y en una pantalla más pequeña?
  • ¿Y para quien navega con teclado?

Al terminar deberías poder responder

  1. ¿Cómo se relacionan HTML y CSS?
  2. ¿Qué partes tiene una regla CSS?
  3. ¿Qué diferencia hay entre seleccionar por elemento, por clase y por id?
  4. ¿Qué significa que CSS sea «en cascada»?
  5. ¿Qué es la especificidad y en qué orden pesan los selectores?
  6. ¿Qué propiedades suelen heredarse y cuáles no?
  7. ¿Por qué !important no es una solución?
  8. ¿Qué capas tiene el box model?
  9. ¿Qué cambia box-sizing: border-box?
  10. ¿Cuándo usarías px, % o rem?
  11. ¿Qué problema resuelven las custom properties?
  12. ¿Qué hacen min(), max() y clamp()?
  13. ¿Qué es el flujo normal?
  14. ¿Qué diferencia hay entre block, inline e inline-block?
  15. ¿Qué diferencia hay entre relative y absolute respecto al hueco?
  16. ¿Cuándo usarías Flexbox?
  17. ¿Sobre qué eje actúan justify-content y align-items?
  18. ¿Cuándo usarías Grid?
  19. ¿Qué representa fr y por qué no es un porcentaje?
  20. ¿Para qué sirven repeat() y minmax()?
  21. ¿Qué diferencia hay entre auto-fit y auto-fill?
  22. ¿Qué significa diseño responsive, y qué mobile first?
  23. ¿Dónde debe colocarse un breakpoint, y por qué no en las medidas de un teléfono?
  24. ¿Qué problema resuelven object-fit y aspect-ratio?
  25. ¿Por qué :focus-visible es importante y qué no debe hacerse con outline?
  26. ¿Qué diferencia hay entre una media query y una container query?
  27. ¿Cómo averiguas con DevTools qué regla está ganando, y cómo distingues eso de un selector que no encuentra nada?

Si puedes responderlas y construir un sitio responsive sin depender de Bootstrap ni de una plantilla, tienes una base sólida de CSS.

El vocabulario de la unidad

Concepto Significa
Regla Un selector más su bloque de declaraciones
Declaración Una propiedad con su valor
Cascada El mecanismo que decide qué declaración se aplica cuando varias compiten
Especificidad Cuán concreto es un selector: elemento < clase < id
Herencia Que ciertas propiedades pasen de un elemento a sus descendientes
Pseudo-clase Selector por estado o posición, como :hover o :first-child
Custom property Variable de CSS, declarada con -- y leída con var()
Box model Las capas de una caja: contenido, padding, borde y margen
border-box Que width incluya el padding y el borde
Número mágico Un valor escrito a pelo sin que nada explique de dónde sale
Flujo normal La colocación por defecto, siguiendo el orden del documento
Eje principal La dirección en que Flexbox coloca sus elementos
Eje transversal El perpendicular al principal
gap Separación entre elementos de un Flexbox o un Grid
fr Una fracción del espacio libre, ya descontados los gap
Pista Cada columna o fila de una cuadrícula
Área Un grupo rectangular de celdas, que puede tener nombre
Breakpoint La anchura a la que el diseño cambia de disposición
Mobile first Escribir primero la disposición simple y añadir después las anchas
Media query Consulta sobre el viewport o sobre una preferencia del usuario
Container query Consulta sobre el espacio disponible del contenedor de un componente
object-fit Cómo encaja una imagen en la caja que se le da
:focus-visible El estado de foco cuando la indicación hace falta

La siguiente unidad

Tu sitio ya puede mostrar información, adaptarse al dispositivo, recoger datos en un formulario y responder con estados visuales.

Lo que todavía no sabe es reaccionar con lógica.

Las tres capas
  1. HTML · qué existe
  2. CSS · cómo se presenta
  3. JavaScript · qué ocurre

En la siguiente unidad empieza la programación, y lo hará, de forma deliberada, casi sin modificar la página: primero el lenguaje —datos, decisiones, funciones y estructuras— porque un filtro que no filtra casi nunca es un problema del botón, sino de una lógica que todavía no se sabe leer. La interfaz que reacciona llega justo después, en la UD4.

El trabajo de estas semanas demostrará entonces de nuevo su utilidad: sobre un documento semántico y un CSS que separa estructura de presentación, añadir comportamiento es añadir una capa. Sobre lo otro, es empezar de nuevo.

Ya deberías ser capaz de

  • Enlazar una hoja de estilos y saber diagnosticar por qué una página no la está cargando.
  • Elegir el selector que corresponde al problema en lugar del que casualmente funciona.
  • Diagnosticar con DevTools qué regla gana un conflicto, y resolverlo sin recurrir a !important.
  • Razonar el tamaño de un elemento con el box model y box-sizing.
  • Construir un sistema visual mínimo con variables, una escala tipográfica y un espaciado consistente.
  • Distribuir elementos con Flexbox cuando el problema es de una dimensión.
  • Maquetar con Grid cuando el problema tiene filas y columnas a la vez.
  • Conseguir que un diseño se adapte de forma fluida antes de escribir la primera media query.
  • Colocar los breakpoints donde el contenido deja de funcionar, no donde está de moda un teléfono.
  • Mantener visibles los estados de foco y respetar las preferencias de movimiento del usuario.
  • Refactorizar una hoja de estilos frágil hacia un modelo de layout que aguante cambios de contenido.