Relevancia actual de preprocesadores CSS en desarrollo web

¡Hola a todos!

Hoy quiero profundizar en un tema fundamental para el desarrollo web moderno: los preprocesadores CSS y su relevancia actual en nuestros proyectos. En el pasado, herramientas como SASS y LESS jugaron un papel crucial al mejorar la eficiencia y la organización del código CSS. Sin embargo, surge la pregunta de si todavía son imprescindibles en los proyectos que comenzamos en la actualidad.

La llegada de CSS Wrapped en 2023 ha marcado un antes y un después al integrar funciones avanzadas directamente en CSS estándar. Estas nuevas capacidades incluyen operaciones trigonométricas, selección n-ésima, anidación, subcuadrículas y la poderosa función color-mix. Estos avances ofrecen una flexibilidad y potencia que anteriormente solo se podían alcanzar con preprocesadores, lo que potencialmente elimina la necesidad de depender de ellos para tareas complejas de diseño y estilización.

Además, es importante considerar el peso adicional que los preprocesadores añaden al flujo de trabajo. Esto implica aprender una sintaxis específica y configurar herramientas de compilación (Que también tienen que ejecutarse y demoran un tiempo significativo), aspectos que pueden parecer innecesarios y complicados comparados con la simplicidad del CSS nativo o alternativas modernas como PostCSS.

Entiendo que existen casos donde los preprocesadores siguen siendo útiles (y rentables como SASS), especialmente en entornos donde ya está establecida una infraestructura que depende de estas herramientas. Sin embargo, al iniciar nuevos proyectos, creo que es esencial evaluar si realmente aportan un valor significativo o si podríamos alcanzar resultados similares con menos complejidad utilizando las capacidades nativas de CSS y herramientas modernas de optimización.

Me encantaría conocer sus perspectivas y experiencias sobre este tema. ¿Han encontrado situaciones donde los preprocesadores CSS fueron indispensables en sus proyectos recientes? ¿O han optado por métodos más directos y eficientes para manejar estilos en el frontend?

Creo que esta discusión puede ayudarnos a reflexionar sobre nuestras prácticas de desarrollo y explorar nuevas formas de optimizar nuestros flujos de trabajo en el frontend.

¡Gracias por compartir sus opiniones!

Yo aun sigo usando Sass y Lostgrid con gulp. Aunque lost esta casi abandonado, no puedo evitar dejar de usar sass y gulp por sus multilples paquetes, por ejemplo el indispensable para mi browserSync, sourcemaps, etc, desde que uno descubre la facilidad de Sass jamas volves a Css a pelo...

Depende, tuve un jefe que los defendía a capa y espada, pero en la vida real en nuestro workflow realmente no eran indispensables.

En mi opinión personal, entre los aportes de estas herramientas, quizá el más relevante y específico es el uso de variables, crear CSS on the fly, el resto... todo se puede lograr sin pre-procesadores, pero al final, si tú tienes control sobre tu código, igual puedes generar tú mismo tu CSS con variables y altamente específico.

En cuanto a velocidad y ahorro de recursos... depende mucho de tus técnicas. Te puedo dar un ejemplo relevante, hice un trabajo para una entidad bancaria y su CRM, el frontend y CSS los dejé altamente optimizados, esto importa porque son tantos usuarios con tantas solicitudes, que 1K menos importa muchísimo en el bandwith y velocidad. Básicamente esto requirió mucha dedicación para hacer el CSS tan específico como optimizado, y luego de implementarlo me lo agradecieron viendo el descenso en uso de recursos.

Pero no es solo eso. Verás, Google y herramientas como insights te insisten mucho "quite esto y esto porque es CSS que no se usa en su página", y la tendencia que quieren imponer es que TODO lo que despliegue tu página se utilice, y lo que no, quitarlo, por diversas razones. Ok, pero al final, si haces bien tu CSS puedes lograrlo, y encima, recurriendo a técnicas de reuso, compresión, y caché tanto a nivel server como on the fly y local en el navegador de tu cliente... uff... la solicitud se hace una sola vez y nunca más hasta que tú le digas que expire.

Ya en la vida real con diferentes páginas, tú mismo puedes hacer las pruebas de peso y bandwidth donde compite en el caso A un set de páginas con CSS totalmente específico y sin links, VS B, un set de las mismas páginas con el CSS cacheado, no necesitas más de 30 segundos para ver los resultados de pruebas, una semana sería una exageración de pruebas, innecesarias. Además, esto es más relevante donde tus páginas son dinámicas, mucha más razón para CSS linkeado y cacheado.

Este tema lleva tiempo discutirlo y requiere muchos ejemplos con pruebas a la mano, en nuestro caso, este ex jefe quedó convencido que nunca nos resultaron indispensables estas herramientas.

Hay que ver también a largo plazo.

El desarrollo no es religión, me refiero a que cuando le pones demasiado énfasis a estas cosas, terminas con un código taaaaaan especializado, que solo el que lo escribió lo entiende, y con esto se hace difícil el mantenimiento con múltiples piezas móviles, difícil para cuando contratas a alguien nuevo. Mis 10 centavos.

En mi caso 1 0 2kb no me hacen la diferencia, pero en ese punto tienes razon un css ultraoptimizado puede dar mejores resultados. Pero hablo a nivel de webs, simples y funcionales, esos kb que te ahorras no sirven de nada. Yo me acostumbré tanto a usar casi todas las funcionalidades de Sass que es imposible no hacer nada sin pensar en hacerlo si ello, tengo mi propia biblioteca de mixins, mis variables que si quiero hacer otro theme de WP con diferentes colores, solo voy a las variables y se las cambio, ancho, sidebars, columnas, font-size.. Y encima un minify. Si lo tuviera que hacer a pelo, tardaría 10 veces mas... Creo que es cuestion muy personal y lo que el proyecto necesite.

Lo que sii, y en algun momento debo dejar, es Jquery, tengo las webs desde hace 12 años funcionando y con cientos de llamadas/ajax, por ejemplo que cambiarlo ahora seria un dolor de pelotas. 😴

Luisin dijo:

En mi caso 1 0 2kb no me hacen la diferencia, pero en ese punto tienes razon un css ultraoptimizado puede dar mejores resultados. Pero hablo a nivel de webs, simples y funcionales, esos kb que te ahorras no sirven de nada. Yo me acostumbré tanto a usar casi todas las funcionalidades de Sass que es imposible no hacer nada sin pensar en hacerlo si ello, tengo mi propia biblioteca de mixins, mis variables que si quiero hacer otro theme de WP con diferentes colores, solo voy a las variables y se las cambio, ancho, sidebars, columnas, font-size.. Y encima un minify. Si lo tuviera que hacer a pelo, tardaría 10 veces mas... Creo que es cuestion muy personal y lo que el proyecto necesite.

Lo que sii, y en algun momento debo dejar, es Jquery, tengo las webs desde hace 12 años funcionando y con cientos de llamadas/ajax, por ejemplo que cambiarlo ahora seria un dolor de pelotas. 😴

Hacer clic para expandir...

Muy bien, da gusto leer cuando alguien sabe hacer las cosas y no solamente las lee. Me refiero a que en términos de Wordpress, es usual que los foros estén llenos de problemas y consultas sencillas sobre una herramienta que hace bastante trabajo por ellos, pero ellos no saben más que alimentar el sitio (nada de maquetación).

No recuerdo el nombre del sitio web... hace años hubo algo como no sé qué naked... y ahí posteaban desafíos. Consistían en sitios web semánticamente correctos con un CSS aplicado, y el challenge era que tomaras el CSS y lo modificaras para darle una apariencia completamente al sitio web sin tocar nada del HTML ni estructura. Esto al inicio me parecía aburrido, pero con los años comprendí lo útil que es saber bien el uso de CSS y sus aplicaciones.

Por años fui más user de Drupal que de Worpdress (aunque monté cantidad de sitios web similares en cada uno). Hacer themes para Drupal es otro rollo versus los de WP, y ahí muchos tiran la toalla. Ahí comprendí en modo real la utilidad de conocer bien el CSS.

Es exactamente como dices. Una web bien hecha debe permitir intervenciones solo con tocar el CSS y sin siquiera alterar el HTML.

xplorando dijo:

el challenge era que tomaras el CSS y lo modificaras para darle una apariencia completamente al sitio web sin tocar nada del HTML ni estructura.

Hacer clic para expandir...

Uno de estos es csszengarden.

Parece ke no escribes código para frameworks modernos como Angular, React, Svelte o Vue (en estricto orden alfabético) porque cada uno d ellos tienen secciones para la lógica: JS, el view o model-view HTML y -obvio- el estilo con CSS/SCSS. D hecho by default solo aceptan CSS pero es posible agregarles soporte para SCSS o incluso LESS, pero LESS ya está en franco declive.

Aunque todos estos frameworks usan la modularidad o atomicidad vía componentes, no significa ke debas rellenar cada sección, lo ke en último caso significa ke cada componente no debe OBLIGATORIAMENTE tener definidas sus propias reglas CSS/SCSS 'locales'. D hecho es posible tener un archivo master o main donde puedes definir estilos globales o simplemente importar una librería tipo Bootstrap o Foundation y evitarte definir nombres d clases CSS específicas.

Y si eres diseñador, seguramente has oído hablar d Tailwind, ke está como d moda pero a la ke en lo personal tengo una fobia feroz pues como ke 'ensucia' el código HTML con declaraciones class="..." ke a veces son kilométricos 🤣🤣🤣. Tailwind no usa pre-procesadores clásicos como SCSS o LESS sino algo llamado preCSS o postCSS o algo parecido que no es un compilador de CSS propiamente dicho pues solo soporta CSS pero con algunas propiedades avanzadas. SCSS por su parte permite definir funciones, widgets y variables por lo ke los programadores lo hallamos más afín a nuestra lógica d desarrollo.

En fin, ya para irme, la respuesta a tu pregunta es SÍ, siguen siendo relevantes.

PS: Happy labor day everybody!!!