CSS: What is Fela and how does it work?

CSS: What is Fela and how does it work?

We have been talking for a few weeks about CSS and the latest CSS news on the market in recent years. One of these “new features” is fela : a system that allows you to answer the question “ how can I generate unique CSS classes for each rule?”.

What is Fela?

Fela is a small, high-performance, framework-agnostic toolkit - you can use it with React, or React Native - that allows you to manage state-based styles in JavaScript.

Furthermore, Fela is a tool compatible with all common CSS features, such as media queries , pseudo-classes , or font-faces , generating atomic CSS.

Let's look at some cool features and benefits of Fela.

Atomic CSS

One of the goals - possibly the most important - of the tool is that you only get the styles that you really need. Therefore, Fela generates atomic CSS classes and for each property-value pair there is only one rule that can be used in your application.

I think you can imagine the limitation in amount of CSS and markup in your code. I find this feature very interesting.

Agnostic to the framework

Thanks to the evolution of JavaScript , in recent years, Fela is a library that has the luxury of being written in simple JavaScript , being able to work without any framework. However, if you want to use Fela with React , Vue, or Reason , you won't have much trouble doing so.

Also read this article: CSS: What happened in 2020?

Predictable style

This is another of the most interesting features, from my point of view. As we mentioned earlier, Fela generates unique CSS classes for each rule. In addition, it automatically orders the rules, pseudo-classes and media-wants. How about?

What you gain with this is predictability, since you always get the styles you write, avoiding conflicts, repetitions, etc, etc ...

High performance

Thanks to Fela's atomic class design you can have a faster rendering. Also, declarations that have been rendered can be reused immediately thanks to its caching system.  

And, although the adoption of CSS-in-js is not yet widespread enough, I think it is worth mentioning that rendering styles with JavaScript have their advantages, since CSS is generated only when necessary.

Also, read this article: CSS Houdini: What is it and what is special about it?

Does Fela have a problem?

Obviously not all is good news with Fela, there are also some downsides. If you want to implement this library in your next project, I think it's worth knowing that:

·        The selectors calculated   avoid conflicts, but are not designed to be human-readable and can not mutate.

·        The properties of shorthand and longhand CSS can not be combined safely in a single rule in the design of atomic CSS. This is a very important feature to consider before integrating the library into your projects.

·        For CSS properties with double quotes you must use nested quotes in your code.

Organizations using Fela

The success of a tool always depends on its adoption by web developers. The following are some of the organizations that use Fela:

• ·         Microsoft
• ·         Volvo
• ·         Medium
• ·         Cloudflare
• ·         Zendesk

Conclusion

To conclude, Fela is a tool that allows you to simplify your CSS code and classes, as well as improve the performance of your styles.

If you want to install Fela, to see how it works, you can always access the official documentation and follow the recommended steps. If you already use it, comment below, and let us know how your experience has been to date!