Filosofía CSS

Hola a todos! Es hora de anunciar que planeamos lanzar un nuevo libro CSS antes de finales de febrero, que se recomienda a todos los que ya dominen MacFarland (aunque todavía está disponible, planeamos hacer la próxima sobrepresión en enero).

Hoy está invitado a traducir un artículo de Keith Grant (publicado en junio), en el que el autor expone su punto de vista sobre CSS y en realidad explica de qué quería hablar en su libro. ¡Leemos y comentamos!



Pasé mucho tiempo reflexionando sobre qué es el pensamiento orientado a CSS. Parece que algunos logran "aprenderlo", mientras que otros no. Creo que si pudiera articular claramente cuál es esta visión del mundo, tal vez el CSS en sí sería más comprensible para aquellos que trabajan con ellos. Esto es en parte por qué me senté y escribí el libro CSS para profesionales.

Hoy quiero abordar este problema una vez más. Considere tres características clave de CSS que distinguen este lenguaje de los lenguajes de programación tradicionales. CSS es persistente, declarativo y contextual. Creo que comprender estos aspectos del lenguaje es un requisito previo clave para convertirse en un maestro de CSS.

Resistente a CSS

Si elimina accidentalmente un fragmento de código en un archivo JavaScript, entonces la aplicación o página web donde se usa seguramente se bloqueará o se congelará, y el script (o incluso toda la página) fallará. Si haces lo mismo en CSS, es posible que no notes nada. Casi todos los demás códigos, excepto el fragmento eliminado, continuarán funcionando como deberían.

Esta propiedad se llama resiliencia. HTML y CSS están especialmente diseñados con la expectativa de tolerancia a fallas. Si ocurre un problema, el navegador arroja un error; de lo contrario, simplemente ignora esta parte del código y va más allá.

Desde el punto de vista de la depuración, esto puede parecer absurdo: si un programa no arroja errores, ¿cómo podemos descubrir que algo salió mal? Pero este es el aspecto más importante del dispositivo CSS. Está tejido en la tela de la lengua misma. Lo admito, lleva tiempo acostumbrarse. Sin embargo, tan pronto como entienda esto, puede proceder de manera segura a usar las funciones que no son compatibles con todos los navegadores. Así es como se garantiza el desarrollo progresivo de un sitio o aplicación.

Considere este ejemplo con un diseño de malla. Funciona tanto en navegadores que admiten la cuadrícula como en navegadores que no admiten la cuadrícula. En los navegadores donde no se admite la cuadrícula, el diseño resultará ligeramente irregular (los tamaños exactos de los elementos pueden variar), pero la página se distribuirá aproximadamente como debería:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

Un navegador que no entienda las dos declaraciones de cuadrícula las ignorará, y será posible completar el trabajo gracias a otras reglas. A su vez, el navegador que comprende la cuadrícula usa el diseño de la cuadrícula e ignorará la declaración de bloque en línea (ya que así es como está diseñada la cuadrícula para funcionar). Jen Simmons, en broma, llama a este fenómeno " Quantum CSS ". Usted toma alguna capacidad de CSS y "usa y no usa al mismo tiempo". Pero al mismo tiempo funciona y no funciona ".

Este fenómeno de comportamiento de "seguridad" es una parte integral del trabajo con CSS, pero es ajeno a la mayoría de los lenguajes de programación tradicionales.

CSS declarativo

En JavaScript, escribimos instrucciones específicas paso a paso que describen cómo el programa debería llegar a algún resultado. En CSS, le dice al navegador qué es exactamente lo que quiere ver en la pantalla, y el navegador encuentra la manera de hacerlo. Comprender esto es muy importante. Si aprende esto, entonces CSS hará todo el trabajo duro por usted , y si no lo hace, comprenderá la esencia misma de CSS y se sentirá decepcionado una y otra vez.

Cuando escribe CSS, en realidad está configurando un sistema de restricciones. No le indicamos al navegador dónde debe estar cada elemento en particular en la página, pero informamos qué sangría debe haber entre ellos, después de lo cual el navegador pone todo en su lugar. No le dice al navegador (al menos, no debe indicar) qué altura debe tener el contenedor. Le permite al navegador determinar esto durante la visualización en sí, cuando conoce el contenido del contenedor, sabe qué otros estilos se usan en este contexto y cuál es el ancho disponible de la ventana gráfica.

Tienes que considerar demasiadas variables. La esencia de CSS es organizar el proceso para que no tenga que preocuparse por todas estas variables. Definir un sistema de restricciones. El lenguaje en sí cuida los detalles.

Ejemplo simple

Veamos una muestra de CSS: font-size: 2em . ¿Qué hace este código? "Aumenta el tamaño de la fuente", dice. Pero eso no es todo. También corrige la separación silábica de las líneas de texto dentro del contenedor, ya que ahora caben menos palabras en cada línea. En consecuencia, esto a menudo aumenta el número de líneas de texto, y también aumenta la altura del contenedor para que estas nuevas líneas quepan en él. Cuando cambia la altura del contenedor, todo el texto ubicado en la página debajo de este contenedor cambiará en consecuencia. Finalmente, el código anterior también establece el valor local em . Los valores de todas las demás propiedades que se usaron para determinar las unidades em deberán calcularse nuevamente.

Este anuncio solo genera un tren completo de cambios en la página. Y todos están diseñados para lograr exactamente lo que debe esforzarse: el contenido siempre se ajusta a la página, los elementos no se superponen entre sí y todas las propiedades que dependen del tamaño de la fuente se corrigen (digamos, sangría). No tiene que pensar en todos estos detalles. El navegador mismo realiza todos los cálculos anteriores y lo hace de manera predeterminada.

Si no desea que nada de esto suceda, también puede hacerlo. Puede limitar severamente la altura de un contenedor con las propiedades max-height y overflow: auto . Puede redefinir los márgenes internos para que se midan en unidades de rem o px , es decir, no se vuelvan a contar después del tamaño de fuente. Esto revela un aspecto interesante de trabajar con CSS: a veces no le dice al navegador lo que debe hacer, pero, de hecho, le prohíbe que haga algo.

Ventajas de la grilla

Sin embargo, hay nuevas características en CSS que son aún más geniales. Los ejemplos más comunes son Flexbox y Grid. Solo unos pocos anuncios, y tiene un diseño de malla excepcionalmente flexible que simplemente funciona. No hay que preocuparse por numerosos casos especiales. De hecho, le dice al navegador: "apile estos bloques en columnas de 400 píxeles de ancho cada uno", y el navegador lo hace por usted. Todo acerca de todo requiere aproximadamente tres líneas de código.

Si intentaras hacer esto imperativamente, tendrías que lidiar con muchos escenarios extraños. ¿Qué pasa si uno de los bloques tiene una palabra demasiado larga? ¿Qué pasa si la ventana gráfica es demasiado estrecha? ¿Y si es muy ancho? ¿Qué sucede si hay una hoja de contenido completa en un elemento y solo unas pocas palabras en otro? Es cierto que es probable que en CSS no tenga que pensar en nada de esto. Todo ya está pensado y establecido en las especificaciones, y el navegador sigue las reglas por usted. Este es el poder del lenguaje declarativo.

Por supuesto, esto no está exento de compromisos. Si el lenguaje declarativo no admite ninguna de las características que necesita (por ejemplo, "puente"), queda por confiar en los trucos del abuelo o en JavaScript. Además, el desarrollo de CSS se ha dedicado en gran medida a la lucha contra tales cosas durante muchos años. Afortunadamente, con el desarrollo de Flexbox y Grid, podemos hacer mucho más y sin hacks (sí, los elementos sueltos son un hack). Si aún te falta algo en esta situación, te recomiendo leer sobre CSS Houdini , que recién está comenzando a arraigarse en los navegadores.

CSS es sensible al contexto

En la era React, hemos adoptado un enfoque extremadamente práctico: desarrollo basado en componentes modulares. Cumple con las mejores prácticas de CSS, junto con BEM, SMACSS y CSS-in-JS. No quiero minimizar la importancia de todas estas características, ya que juegan un papel clave en la creación de aplicaciones a gran escala. Pero, creo que es igualmente importante reconocer que CSS no es 100% modular, y no debería serlo.
Hay dos razones para esto. El primero y más obvio: la aplicación debe diseñarse en estilos globales. Casi siempre, debe configurar los auriculares y el tamaño de fuente en el nivel de página, que se utilizará de forma predeterminada. Después de eso, todos los elementos descendientes heredarán estos valores que no los anularán explícitamente. También necesita que algunos aspectos de su diseño se apliquen sistemáticamente en toda la página: tema de color, radios de redondeo para bloques, sombreado de bloques y tamaños generales de margen. Se aplican más estilos locales que actúan en partes de la página en el contexto de estos estilos globales.

La segunda razón, más sutil, es que tanto CSS como sus decisiones de diseño dependen del contexto de la página. Supongamos que aplicamos los siguientes estilos CSS a un elemento en una página:

 .the-thing { position: absolute; top: 10px; left: 10px; } 

¿Qué hará este código? Sin saber exactamente dónde se encuentra este elemento dentro del DOM y qué estilos se aplican en el resto de la página, no podemos responder esta pregunta. La colocación absoluta se realiza en relación con el elemento ancestro más cercano, y esta posición será diferente dependiendo de qué tipo de antepasado en cuestión y qué tipo de ubicación se le aplicó.

Además, su capacidad (o imposibilidad) de superponer elementos entre sí dependerá en gran medida de dónde se encuentren estos dos elementos en el DOM. La combinación aleatoria de elementos en el DOM puede afectar drásticamente el diseño de los elementos y cómo se superponen. Es por eso que el flujo de documentos y los contextos de superposición son temas fundamentales (aunque a veces complejos).

La naturaleza contextual de CSS se debe en parte al hecho de que así es como funciona el diseño. Si un ingeniero diseña un puente, no puede simplemente mirar el dibujo y decir: "todo está bien, pero no me gusta esta viga; llévatela ". Si elimina una viga, esto afectará la unidad estructural de todo el puente. Del mismo modo, simplemente cambie cualquier elemento de diseño, y todos los demás elementos en la pantalla se percibirán de manera diferente. A menudo es necesario elaborar varios elementos a la vez en estrecha unidad entre sí.

Por ejemplo, si aumenta el título en uno de los mosaicos, será más evidente para el usuario, y debido a esto, otros elementos en la pantalla parecerán menos importantes. Aquí las limitaciones no se encuentran en el plano de la física, como en la construcción del puente; estamos hablando de más leyes "humanitarias" que afectan la percepción humana. Los elementos de la página se reflejan en la pantalla, que tiene sus propias características físicas, y cuando se trabaja es necesario tener en cuenta las realidades del mundo físico y cómo lo percibimos.

Como saben, la arquitectura del software está sujeta a los principios de modularidad y encapsulación . Este enfoque se justifica a nivel de código, ya que el código es complejo y el método descrito le permite dividir el problema en fragmentos digeribles. Sin embargo, debe tenerse en cuenta que este enfoque es imperfecto. En CSS, nunca puede ignorar por completo lo que está sucediendo en un módulo en particular.

Resumen

Los tres aspectos descritos distinguen CSS de los lenguajes de programación tradicionales. Es posible que estas diferencias no quepan inmediatamente en su cabeza, pero son los aspectos más poderosos de CSS. Me aventuraré a sugerir que los desarrolladores que logran comprender y comprender adecuadamente estos principios alcanzarán alturas reales en CSS.