FCSS: librería de CSS utilitario basada en propiedades reales

Fuentes: FCSS: utility CSS library based on real CSS properties

FCSS es una librería de CSS utilitario diseñada para desarrolladores que buscan eliminar la dependencia de hojas de estilo externas complejas. Su característica principal es que cada nombre de clase corresponde directamente a una propiedad CSS y su valor, permitiendo que el navegador reciba CSS plano sin necesidad de ejecución de tiempo de compilación (runtime). Por ejemplo, la clase 'padding--24' se traduce exactamente a 'padding: 24px', lo que simplifica la lectura y el mantenimiento del código.

El sistema soporta variantes de estados, como 'hover' o atributos ARIA, integradas en el nombre de la clase, y maneja breakpoints mediante prefijos de tamaño (sm, md, lg, xl, xxl). Al ser un archivo estático, el navegador no necesita JavaScript adicional para aplicar los estilos, lo que mejora el rendimiento y la accesibilidad.

FCSS funciona con cualquier framework o sin uno, aunque su integración más eficiente requiere un paso de limpieza (purge) para eliminar las clases no utilizadas. La librería incluye integraciones específicas para Vite, Next.js, Astro y Angular, así como soporte para bundlers genéricos mediante PostCSS. En producción, el archivo CSS completo (aproximadamente 28 MB) se reduce a unos pocos kilobytes mediante la eliminación de clases innecesarias, optimizando el tamaño de la página. La instalación es sencilla mediante npm, pnpm, yarn o bun, y la configuración permite escanear archivos HTML, JS/TS y plantillas para identificar qué clases se utilizan realmente.