DEV Community

Discussion on: Is the Tailwind approach a big step forward for CSS or just-yet-another-thing?

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€ • Edited

I think atomic/utility/functional css is an interesting approach in writing css that was mostly misunderstood until tailwindcss came out with this specific implementation. It mostly makes styling components faster and frontend developers love it. On top of that can reduce the amount of the final css send to the browser and can benefit website/apps of any size. Facebook recently anounced how their new atomic css approach has reduced their css by even 80%.

I think tailwind it is here to stay and perhaps more frameworks will follow this paradigm.

Collapse
 
xowap profile image
RΓ©my πŸ€–

Funny article where Facebook announces to the world they've discovered this new framework called React and they used it for their home page.

Though to me the only lesson we can get from there is that they trashed 16 years of legacy code written between vodka shots in order to use more modern practices and it improved a bit. I wouldn't draw any conclusion towards "atomic CSS" or Tailwind.

Collapse
 
ben profile image
Ben Halpern

I agree with this.

Collapse
 
mikaelgramont profile image
Mikael Gramont

I would take the "Facebook reduced their CSS by 80%" point with a grain of salt.

There is no hard rule saying that atomic CSS will reduce your CSS by a large amount. It all depends on how the CSS was written in the first place (not to mention how the counting was done).

Imagine FB has 300 engineers working their UI (I don't really know). It's very likely that a lot of them will repeat the same code (BTW, this is what brought Nicole Sullivan to come up with OOCSS back in the day), and atomic CSS is likely to have a big impact here because there is so much CSS in the first place.

But on smaller teams, with 4 devs who know what they're doing? I'd be surprised if we saw more than a 15% reduction.

All of this is opinion, and I have no data to back it up, but I don't think this is a crazy argument.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€

Yes I usually take everything with a grain of salt. I am just pointing out the possibility and facebook example shows that if carefully planned we can have big reductions in css size.

In the case of tailwind the integrated purgecss plugin can help us reduce the css size but it is not always possible to actually use it and in those cases tailwind should be avoided or manual optimizations should be employed. Purgecss usually needs to scan all pages to see classes used to eliminate the unused ones which is not always possible especially on dynamic sites.

I believe will see tools and platforms finding ways to feed the used classes to purgecss to take advantage of tailwind powers. This is usually a painpoint of integrating tailwind with any existing platform/framework/project.

For me the main point from the facebok article in regards to css is that they addressed this by generating atomic CSS at build time. It would be nice if they open sourced this tool. Either way at least it has given food for thought to many excellent engineers to think of ways to do the same and will be seeing similar approaches very soon.