CSS: ¿Qué es Fela y cómo funciona?
Llevamos algunas semanas hablando sobre CSS y las últimas novedades de CSS en el mercado, en los últimos años. Una de estas “novedades” es fela: un sistema que te permite contestar a la pregunta “¿cómo puedo generar clases de CSS únicas para cada regla?”.
¿Qué es Fela?
Fela es un pequeño conjunto de herramientas, de alto rendimiento y agnóstico al framework - puedes usarlo con React, o React Native - que te permite gestionar los estilos basados en los estados en JavaScript.
Además, Fela es una herramienta compatible con todas las características comunes de CSS, como por ejemplo medias queries, pseudo-classes, o font-faces, generando CSS atómico.
Miremos algunas características interesantes y beneficios de Fela.
CSS atómico
Uno de los objetivos - posiblemente el más importante - de la herramienta es que solamente obtengas los estilos que realmente necesites. Por tanto, Fela genera clases de CSS atómicas y por cada par de propiedad-valor existe solamente una regla que se puede utilizar en tu aplicación.
Creo que puedes imaginarte la limitación en cantidad de CSS y de marcado en tu código. Me parece muy interesante esta característica.
Agnóstico al framework
Gracias a la evolución de JavaScript, en los últimos años, Fela es una biblioteca que se da el lujo de estar escrita en JavaScript simple, pudiendo funcionar sin ningún framework. Sin embargo, si quieres utilizar Fela con React, Vue o Reason, no tendrás muchos problemas en hacerlo.
Estilo predecible
Esta es otra de las características más interesantes, según mi punto de vista. Como hemos mencionado anteriormente, Fela genera clases de CSS únicas para cada regla. Además, ordena de forma automática las reglas, pseudo-clases y media-quieres. ¿Qué te parece?
Lo que ganas con esto es predictibilidad, ya que siempre obtienes los estilos que escribes, evitando conflictos, repeticiones, etc, etc…
Alto rendimiento
Gracias al diseño de clases atómicas de Fela puedes tener un renderizado más rápido. Asimismo, las declaraciones que se hayan renderizado se pueden reutilizar inmediatamente gracias a su sistema de caché.
Y, aunque la adopción de css-in-js aún no esté lo suficientemente extendida, creo que vale la pena referir que renderizar estilos con JavaScript tiene sus ventajas, pues el CSS es generado solamente cuando sea necesario.
¿Tiene Fela algún problema?
Obviamente que no todo son buenas noticias con Fela, también hay algunas desventajas. Si quieres implementar esta biblioteca en tu próximo proyecto, creo que vale la pena saber que:
- Los selectores calculados evitan conflictos, pero no están diseñados para ser legibles por humanos y no se pueden mutar.
- Las propiedades shorthand y longhand de CSS no se pueden combinar de forma segura en una sola regla, en el diseño de CSS atómico. Esta es una característica muy importante a tener en cuenta antes de integrar la biblioteca en tus proyectos.
- Para propiedades de CSS con comillas dobles debes utilizar comillas anidadas en tu código.
Organizaciones que utilizan Fela
El éxito de una herramienta depende siempre de su adopción por parte de los desarrolladores web. Las siguientes son algunas de las organizaciones que utilizan Fela:
Conclusión
Para concluir, Fela es una herramienta que te permite simplificar tu código y clases de CSS, además de mejorar el rendimiento de tus estilos.
Si quieres instalar Fela, para ver como funciona, siempre puedes acceder a la documentación oficial y seguir los pasos recomendados. Si ya lo utilizas, ¡coméntalo abajo, y dinos cómo ha sido tu experiencia hasta la fecha!
¿Crees que Fela puede ser útil para tus proyectos de desarrollo web?
FOTO: Markus Spiske de Pixabay
Fuentes