En lugar de mirar el DOM de manera holística, comenzamos a pensar en términos de componentización. Ahora, todo es un componente y un componente realmente es un subárbol del DOM. Ahora, esto no es mirar toda la página presentada al usuario. En cambio, estamos pensando en pequeños subárboles y luego poder mover esos sub árboles dentro de diferentes estructuras DOM, componentes, componente que el componente es fundamentalmente diferente de mirar el DOM de manera holística.
Así que la cuestión es que los desarrolladores de JavaScript que trabajan en frameworks de JavaScript que estaban construyendo el DOM para ellos, las cosas que no les gustaban eran las mismas cosas que la gente amaba de CSS por esa separación de estructura y presentación. Los desarrolladores de JavaScript dirían, bueno, no queremos pasar nuestro tiempo a veces en JavaScript y a veces en CSS y a veces en HTML component cascade. Bueno, eso era un problema debido a mis componentes. Si muevo mi componente de un contenedor a otro contenedor, las reglas de cascada se anulan y tengo que pensar en lo que podría suceder con el CSS en esa página. Selectores que requerían que la estructura del DOM fuera consistente. Y si estoy haciendo un componente y moviéndolo, entonces quién sabe cómo se verá finalmente el DOM realmente.
Como resultado del cambio radical, pasamos de HTML que podría verse así, donde estamos definiendo nuestras clases y usándolas junto con nuestra estructura, las cosas que se están volviendo populares ahora como esto, donde solo nos enfocamos en un elemento particular y solo los estilos para ese elemento, de alguna manera haciendo lo opuesto a lo que CSS estaba destinado, y un inconveniente negativo es enfocarse más en lo que el CSS necesita ser. Y solo agregando un div para que termine obteniendo un componente que se vea como el prototipo. Pero CSS ha seguido creciendo y añadiendo algunas características realmente extraordinarias. Es hora de que el desarrollador moderno de JavaScript, el desarrollador moderno de front end se enamore de CSS. Nuevamente, ¿cuáles son algunas características del CSS moderno que funcionan tan bien ahora? Con la componentización del DOM. Bueno, veamos solo algunos ejemplos. Uno es CSS nesting. Anteriormente, podríamos decir, bueno, tengo una clase de notificación para mi componente de notificación. Y luego, si es realmente una notificación de éxito, entonces agrego una clase secundaria en eso. Y todos esos están separados en tus reglas CSS. Pero ahora, con CSS nesting soportado nativamente que está en el navegador, en la especificación CSS misma, podemos mostrar en la forma en que escribimos nuestro CSS que todas estas reglas están conectadas entre sí, que son parte del mismo conjunto de reglas. Ahora, realmente es solo azúcar sintáctica, lo que significa que no agrega nada que no se pudiera hacer antes, pero es una forma mucho más agradable de escribir tu CSS, especialmente cuando estás escribiendo CSS para un componente, cuando estás escribiendo otra característica, cascade layers, la palabra clave at layer. Esto me permite agrupar mis diferentes reglas CSS y luego ordenarlas según su propia especificidad, pero no realmente especificidad, sino ordenando qué capa debería tener mayor precedencia en la cascada.
Comments