¿Las propiedades personalizadas de CSS superan a los bucles Sass?

Creo que muchos de nuestros usos de mapas Sass se pueden reemplazar con propiedades CSS personalizadas, pero escúchame un momento.

Al diseñar componentes, a menudo necesitamos usar la misma estructura de un componente pero cambiar su fondo o color de texto según un tema. Por ejemplo, en una alerta, es posible que necesitemos un estilo de advertencia, un estilo de error y un estilo de éxito, cada uno de los cuales puede ser ligeramente diferente, como este:

Hay algunas maneras en que podríamos abordar la creación de esto con CSS, y si me hubieras preguntado hace un par de años, habría intentado resolver este problema con mapas Sass. Primero, habría comenzado con los estilos de alerta base, pero luego haría un mapa que contendría todos los datos:

{ background-color: $darkTheme; background-image: url($icon); } .alert-title { color: $darkTheme; } }}

Bastante complicado, ¿eh? Esto generaría clases como .alert-error, .alert-successy .alert-warning, cada una de las cuales tendría un montón de CSS dentro que anula los estilos de alerta predeterminados.

Esto nos dejaría con algo parecido a esta demostración:

¡Sin embargo! Siempre he descubierto que usar mapas Sass y recorrer todos estos datos puede resultar difícil de manejar y extraordinariamente difícil de leer. En proyectos recientes, me topé con usos de mapas increíblemente complicados y cerré lentamente el archivo como si hubiera topado con la escena de un crimen.

¿Cómo mantendremos el código fácil y legible? Bueno, creo que las propiedades personalizadas de CSS hacen que este tipo de bucles sean mucho más fáciles de leer y, por lo tanto, más fáciles de editar y refactorizar en el futuro.

Tomemos el ejemplo anterior y refactoricémoslo para que utilice propiedades personalizadas de CSS. Primero, estableceremos los estilos principales para el .alertcomponente de esta manera:

A medida que creamos esos estilos base, podemos configurar variables en nuestra .alertclase como esta:

{ background-image: var(--icon); }}

Podemos hacer mucho más con las Propiedades personalizadas de CSS que cambian una interfaz a un modo o tema oscuro. No supe hasta que lo intenté que era posible establecer una imagen en una propiedad personalizada como esa; Simplemente asumí que era para valores hexadecimales.

¡De todos modos! A partir de ahí, podemos diseñar cada .alertclase personalizada .alert-warninganulando estas propiedades en .alert:

.alert-success {  --theme: #f0f9ef;  --darkTheme: #7ebb7a;  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/success.svg);}.alert-error {  --theme: #fff5f5;  --darkTheme: #f78b8b;  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/error.svg);}.alert-warning {  --theme: #fff9f0;   --darkTheme: #ffc848;  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/warning.svg);} 

¡Y eso es todo! Obtendremos exactamente la misma interfaz visual que teníamos con un bucle Sass:

Sin embargo, creo que se ha logrado una mejora enorme en términos de legibilidad. Es mucho más fácil mirar este código y comprenderlo de inmediato. Con el bucle Sass, casi parece que estamos tratando de hacer muchas cosas inteligentes en un solo lugar, es decir, anidar clases dentro de otras clases y crear los nombres de las clases. Sin mencionar que luego tenemos que ir y venir entre el mapa Sass original y nuestros estilos.

Con propiedades CSS personalizadas, todos los estilos están contenidos dentro del original .alert.

¡Ahí lo tienes! Creo que no hay mucho que mencionar aquí, aparte del hecho de que las propiedades CSS personalizadas pueden hacer que el código sea más legible y fácil de mantener en el futuro. Y creo que hay algo que debería entusiasmarnos un poco a todos.

Aunque hay una última cosa: probablemente deberíamos tener en cuenta la compatibilidad del navegador mientras trabajamos con Propiedades personalizadas, aunque es bastante buena en todos los aspectos.