¿Estos cambios de CSS hacen que valga más la pena que SASS?

Hasta el momento, SASS se ha establecido como un potente preprocesador instalado localmente, formando la columna vertebral de infinidad de proyectos de Javascript durante más de una década. Permite organizar eficientemente paquetes CSS escalables y estables. Incluso hoy, se sigue considerando que SASS es una herramienta extraordinariamente potente. Sin embargo, a medida que nos adentramos en el año 2024, es innegable que CSS ha experimentado un rápido desarrollo. Características que antes eran exclusivas de SASS ahora están integradas de forma nativa en CSS, incluidas las variables y la última novedad: CSS Nesting. ¿Estos cambios lo hacen la mejor opción para estilizar páginas, o SASS sigue siendo un preprocesador que más vale la pena?

    Definición de variables en CSS

La definición de variables se consideró durante mucho tiempo un punto fuerte exclusivo de SCSS, ya que permitía la gestión centralizada de muchas propiedades, una característica que se echó mucho de menos en CSS durante mucho tiempo. Hoy, sin embargo, las variables también pueden definirse en CSS de forma similar a SASS. Sin embargo, una diferencia significativa es que las variables SASS existen exclusivamente en el contexto del preprocesador, mientras que las variables CSS pueden utilizarse en el navegador e incluso sobreescribirse dinámicamente usando JavaScript.

    Nesting en CSS

La posibilidad de definir las reglas de estilo de un elemento dentro de otro simplifica considerablemente la escritura de CSS. En lugar de utilizar repetidamente el mismo selector para elementos subordinados o pseudoselectores, la anidación permite agruparlos dentro de un selector padre. Esta técnica da lugar a una base de código clara, jerárquicamente estructurada y, por tanto, más eficiente. Con una compatibilidad de más del 84% de los navegadores con el anidamiento de CSS y del 86% con el selector de anidamiento, esta técnica es cada vez más accesible.

    Pseudoclases :is() y :has()

La pseudoclase :is revoluciona el concepto de selector al aceptar una lista de selectores y aplicar estilos a todos los elementos que coincidan con cualquiera de ellos. Esto facilita enormemente la selección y estilización de elementos en el DOM. Además, la pseudoclase CSS :has() proporciona una potente forma de seleccionar un elemento basándose en sus descendientes, similar a la aplicación de estilos condicionales.

    Queries @container

Las Container Queries se consideran la innovación más importante en diseño web desde CSS3. Amplían el concepto de diseño responsivo al permitir que los elementos se ajusten en función del tamaño de sus contenedores. Esta tecnología permite que el diseño de un elemento cambie dinámicamente en función del contexto, lo que da lugar a un diseño más flexible y adaptable.

    Layers en cascada

Con las capas en cascada, podemos evitar el anidamiento de clases, IDs, etc. para una mayor especificidad asignando nuestra propia capa (layer). Usando la regla @layer at y @imports en capas, podemos construir nuestras propias capas de la cascada— desde estilos de baja prioridad como resets y defaults, pasando por temas, frameworks y sistemas de diseño, hasta los estilos de más alta prioridad como componentes, utilidades y overrides. Las capas en cascada le ofrecen más control.

    El futuro de SASS

¿Se supone que todo esto significa que SASS se ha quedado completamente obsoleto? Para nada. Los mixins y las funciones, como la conversión de píxeles en rem, siguen siendo ventajas insustituibles de SASS. No obstante, considero que lo más probable es que los desarrolladores comiencen a prescindir de SASS en la mayoría de proyectos. En su lugar, es muy probable que se utilicen bloques de código predefinidos y paquetes en los editores de código de la elección de cada desarollador, lo que seguramente mejore significativamente el flujo de trabajo de los mismos. Creo sinceramente que en 2024, las ventajas de SASS, incluidos los problemas de instalación, uso y compilación, ya no justifican completamente su uso. La escalabilidad y la facilidad de uso del CSS moderno permiten prescindir de herramientas adicionales.

- Zant