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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
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.