Fela was designed to be capable of universal rendering (client- and server-side rendering) from the very beginning. The renderer, which is the core of Fela, ships with universal rendering capabilities that can be utilized by both the DOM renderer and the server renderer to ship a seamless universal rendering experience.
Each rule is transformed into unique CSS classes by design. Hence there is no chance of any conflicts due to the global namespace.
Dead Code Elimination
Fela only adds styles to the markup that have actively been rendered. Unused style declarations are left out by default.
Minimal Markup Size
Fela uses atomic class design to enable minimal markup size. That means, every single declaration e.g.
is transformed into a unique CSS class. This enables modular style reuse on declaration basis. In general, the more styles are rendered, the more duplicate declarations it contains.
Check the css-in-js-perf-tests(new tab) repository for benchmark results. Also check out css-in-js-app(new tab) for DOM rendering benchmark and comparison.
No Global State