Functional CSS - The mic drop 🎤⏬
Questions of Functional CSS:
- Inline styles?
- Ugly
- Perf?
What is Functional CSS?
Instead of applying a single class to an element
<div class="tan-box">
This is a tan box
</div>
you apply lots!
<div className="bg-tan p-5 text-sm font-bold">
This is a tan box
</div>
First Question, isn't this just inline styles???
No it has the following advantages over them:
1. The CSS specificity is even, little to know overriding
2. You can do breakpoints, hovers, animations and everything else that isn't possible with inline styles API
3. Everything is aligned to a design system (most important)
4. The overall bundle size is lower
The thing that is the same is: 1. No specificity wars 2. No danger of picking the same name as someone else
But I don't like this my HTML looks bad now
Well you can do a couple of things to make it look better.
- Put it into a component:
<TanBox />
- Break it up on multiple lines
<div className="
bg-tan
p-5
text-sm
font-bold
">
This is a tan box
</div>
Yeah but is anyone using this?
How about FACEBOOK, and Mapbox and a bunch of other people
Looks like a lot of work!
Tailwind!