El lenguaje que controla el aspecto y la sensación de los sitios web siempre ha sido poderoso, pero un poco complicado.Los programadores han luchado durante años con toda la duplicación, todo el deseo de adaptar los diseños y toda la evasión de los conflictos de estilo.Tres nuevas características ahora están revolucionando CSS en una herramienta más limpia, más delgada y más moderna: Nesting, Container Queries y Scoped Styles. CSS Estos no son cambios triviales; revolucionan la forma en que diseñamos, y el CSS se vuelve más intuitivo, modular y previsible. En el pasado, CSS hizo que los desarrolladores se repitieran cuando estilizaban elementos. Nesting resuelve esto permitiendo que los estilos sigan la estructura natural del contenido. En lugar de aplicar reglas individualmente por elemento, el nesting les permite ser recopilados lógicamente. Esto hace que los estilos sean más fáciles de leer y seguir, ya que el CSS se parece más a la estructura HTML que está creando. Para los grupos, significa menos errores y una conexión más clara entre el diseño y el código que lo soporta. Container Queries Contenedores necesarios Los desarrolladores web han estado utilizando durante años consultas de medios que ajustan los diseños en función del tamaño de la ventana del navegador. Esto es simplemente maravilloso en algunos casos, pero no cuando un elemento - una tarjeta, botón o barra lateral, por ejemplo - se utiliza en múltiples lugares en una página. Las consultas de contenedores resuelven el problema al hacer que un componente se redimita según el tamaño del espacio en el que reside, no la pantalla entera.Piense en una tarjeta que aparece pequeña en una barra lateral, pero que puede crecer perfectamente en un área de contenido principal - sin trucos adicionales o rondas de trabajo complicadas.Esta capacidad hace que los componentes sean lo más reutilizables y adaptables posible, independientemente de dónde se encuentren. Estilos escondidos Uno de los peores dolores de cabeza de CSS es que los estilos pueden "lechar" a través de una página. Un estilo destinado a un componente puede alterar inadvertidamente a otro, produciendo errores enojantes. Este aislamiento hace que CSS sea previsible y seguro. Es especialmente importante en el desarrollo moderno, donde los sitios web se construyen a partir de muchas piezas reutilizables. Why Do These Features Matter? ¿Por qué son importantes estas características? Juntos, estas tres características incluyen un cambio fundamental en CSS: 
 
 
 
 Nesting mantiene el código limpio y fácil de leer. Las consultas de contenedores permiten que los diseños sean flexibles en cualquier situación. Los estilos de propósito impiden que los componentes se interfiran. Los tres trabajan juntos para alinear el CSS con la naturaleza de la construcción de sitios web hoy en día: modular, reutilizable y centrada en el usuario. The Road Ahead El camino hacia adelante Los desarrolladores que los prueben ahora estarán por delante de la curva cuando llegue el futuro de CSS, y obtendrán beneficios ahora donde está disponible el soporte. Conclusion Conclusión CSS está cambiando para adaptarse a las exigencias del desarrollo web contemporáneo. Nesting, consultas de contenedores y estilos escalonados simplifican el estilo, lo hacen más inteligente y más confiable. Para los diseñadores y desarrolladores, estas características encarnan un futuro donde CSS coopere mejor con la forma en que creamos sitios web ahora. 
 
 Esta historia fue distribuida como una publicación por Sanya Kapoor bajo el Programa de Blogging de Negocios de HackerNoon. Esta historia fue distribuida como una publicación por Sanya Kapoor bajo el Programa de Blogging de Negocios de HackerNoon.

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

Este audio es producido en el idioma original de la historia!

El futuro del diseño web: CSS Nesting, consultas de contenedores y estilos específicos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Una breve introducción a la teoría del cerebro de Boltzmann

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps