I really appreciate a real-world walkthrough of a technology. Not only in what that technology does, but why it was chosen and how it worked for a team. Anybody can read the docs, but what you know after years of real-world usage is far more valuable. Kitty Giraudel:
I want to properly reflect on the choice of going with Fela instead of any other CSS-in-JS library you might have heard of.
I’d never heard of Fela before. To me, the most interesting part is the “atomic” output. It looks like it combines all uses of unique property: value pairs into a unique class and then applies all the necessary classes to the necessary DOM node. I’m sure the result of that is some pretty gnarly looking class output. (I’d suggest putting reasonably named styling hooks on things too, for humans.) But I would think that the chunk of CSS that gets generated and applied to the page is ultimately as small is it can be as it contains nothing repetitive. That’s one the advantages of any well-configured atomic class workflow: tiny CSS.
Fela is also the name of the founder of Nigerian afrobeat. So weird seeing it now a css library name. Kudos
Atomic CSS-in-JS is great.
One thing I particularly like is the ability to be less dependant from CSS loading/insertion order, and the ability to ensure that when you write style={[red,blue]}, the blue wins consistently due to being last in the declaration.
This is only possible with atomic CSS-in-JS, even Tailwind can’t guarantee that.
Tried to explain in my article here:
https://sebastienlorber.com/atomic-css-in-js