CSS: las partes malas inevitables

Fuentes: CSS: Unavoidable Bad Parts
Imagen generada por IA con el prompt: Editorial flat illustration of a tangled web of colorful CSS code blocks and HTML tags on a dark background, with a magnifying glass inspecting a broken page layout
Imagen generada con IA

Este artículo funciona como un tutorial improvisado de CSS pensado para personas que necesitan dar estilo a una página web sin ser desarrolladoras web. Su autor reconoce no ser la persona más indicada para escribirlo —prefiere leer un libro sobre el tema—, pero explica que tuvo que aprender CSS rebuscando en MDN y considera útil documentar lo aprendido, ya que la web moderna ofrece un subconjunto aprendible y de tamaño razonable suficiente para tareas simples como un blog de programación o una GUI sencilla, aunque también esconde una serie de trampas inesperadas que pueden arruinar una página y requerir días de depuración.

El texto distingue entre lo que considera buenas y malas prácticas. Entre las buenas, recomienda usar las etiquetas semánticas de HTML5 (main, article, nav, kbd) para estructurar el contenido, así como ul para listas, details para índices y dl/dt para pares clave-valor. También sugiere el llamado "CSS sin clases" (classless CSS): tras un reset, se puede aplicar estilo directamente a los elementos HTML comunes, y basta con usar main, header, footer y nav para definir la disposición general de la página sin escribir selectores.

Entre las malas prácticas, señala el uso innecesario de elementos envoltorio (wrappers) que se ve al inspeccionar sitios profesionales, y advierte de que rara vez se necesitan si se parte de marcado semántico. Sobre el layout, recuerda que las interfaces son jerarquías de cajas cuyo posicionamiento es un problema sin solución algorítmica general: distintos frameworks usan heurísticas diferentes, por lo que conviene pensar primero qué layouts permite el sistema antes de intentar encajar un diseño concreto. Critica igualmente los valores por defecto del navegador, porque varían entre navegadores y producen resultados inesperados sin que el desarrollador haya escrito la regla responsable, de ahí la necesidad de un CSS reset o de normalización. Por último, cuestiona los selectores de CSS como una forma de abstracción que va en la dirección equivocada, propone alternativas como CSS anidado o utilidades tipo Tailwind con JSX, y critica la definición por defecto de box-sizing por su falta de intuición.