CSS es lógico

Artículo original ↗ Discusión en Hacker News ↗

La reputación de CSS como algo “ilógico” es cuestionada por quienes sostienen que sigue reglas consistentes, aunque a menudo opacas, especialmente en torno a conceptos de diseño como ancho vs. alto, flujo del documento y dimensionamiento basado en porcentajes. Muchos comentarios sugieren que el verdadero problema es una mala herramienta, el lastre histórico y modelos mentales arraigados en interfaces de aplicaciones más que en documentos, lo que hace que funciones como la especificidad, la cascada y los selectores nuevos parezcan poco intuitivos. Alternativas y complementos como Tailwind, el estilo acotado a componentes y las variables de CSS se presentan como intentos de lidiar con esta complejidad más que como evidencia de que CSS carece de lógica interna.

Debate sobre qué significa “lógico”

  • Muchos sostienen que “lógico” en el sentido del artículo (“tiene reglas consistentes”) es trivial: cualquier lenguaje de programación califica.
  • Los críticos dicen que el verdadero problema es la usabilidad humana: CSS puede ser consistente y aun así ser confuso, torpe o “una mierda”.
  • Otros distinguen “lógico” de “intuitivo”: CSS puede estar basado en reglas, pero a menudo choca con los modelos mentales de los desarrolladores.
  • Algunos comparan aprender CSS con aprender un idioma extranjero o vim: una vez que interiorizas el modelo, parece lógico, pero no antes.

Ancho, alto y comportamiento de porcentajes

  • Varios comentarios cuestionan el encuadre del artículo “el ancho mira hacia arriba, la altura mira hacia abajo” por ser engañoso o directamente incorrecto.
  • Aclaración: el ancho y la altura en porcentaje se definen ambos en relación con el bloque contenedor; la confusión surge de los valores por defecto:
    • Los elementos de bloque tienen por defecto width: 100% pero height: auto (basado en el contenido).
    • Esto crea dependencias circulares al usar alturas en porcentaje dentro de contenedores cuyas alturas dependen de su contenido.
  • Los usuarios comparten patrones como establecer html, body { height: 100%; } para que height: 100% se comporte como se espera.
  • Algunos señalan rarezas como que el padding y el margin en porcentaje siempre se basan en el ancho, y que padding-top se comporta de forma sorprendente.

Complejidad, opacidad y herramientas

  • Varios argumentan que CSS en sí no es tan complejo, pero su comportamiento es opaco: las devtools no explican por qué una regla “no funcionó”.
  • Mejoras sugeridas: depuración paso a paso del layout, visualización de la especificidad y advertencias sobre dependencias cíclicas de porcentajes.

Documentos vs aplicaciones

  • Tema recurrente: CSS se construyó para documentos de texto fluidos, pero se usa intensamente para interfaces tipo aplicación.
  • Algunos dicen que las funciones modernas (flexbox, grid, nesting, consultas de contenedor) ahora hacen que los diseños de aplicaciones sean bastante viables, aunque siguen siendo complicados en ciertos casos (por ejemplo, desbordamiento centrado, vistas divididas).
  • Otros desearían diseños basados en restricciones en lugar de un anidamiento profundo y configuraciones intrincadas de flex/grid.

Estrategias de estilo, Tailwind y especificidad

  • Las opiniones están divididas sobre Tailwind: algunos lo ven como una solución pragmática para aplicaciones basadas en componentes; otros lo consideran un “juguete” y hostil para la personalización.
  • Las reglas de especificidad y !important se citan ampliamente como fuentes de comportamiento no intuitivo y de trucos (por ejemplo, repetir clases para superar selectores).
  • Algunos recurren a variables de CSS y calc() para reintroducir un sentido de “lógica” sistemática en sus estilos.