4 ms·

> What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Imagine styling

> What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Imagine styling a table row. That is one style attribute. Now imagine styling a 100 tables rows. That is style attribute duplicated a 100 times. Think of the amount of unnecessary bandwidth consumed to load that HTML file with 100 duplicate style attributes. Not only does it slow down page load times, it also slows down page render times. Now if you add selectors to style attributes then it solves the above issue altogether. But, then you are just re-inventing the wheel. Instead of CSS in a separate file you now have the same functionality but all inlined in style attributes.

yurishimo 6y ago
The render time point is misleading. It can be slower but even on low end devices, CSS is so insanely fast, you would need an HTML source in the tens of MB's range to cause noticeable performance problems. Also, CSS classes do make that even less of a problem. Inline styles are fast enough, and classes are faster by default, so Tailwind wins there. Page load times are interesting, but again, unless you're loading an insane amount of data from the server, it will never be a real issue. Some sort of component architecture solves the problem you bring up w/ duplication. You should never be writing the same thing 100x over. JS frameworks all render 100's of the same component with the same attributes and performance is fine for 99% of real use cases. The downsides for Tailwind all revolve around personal preference and how your team organizes a project. There is no performance hit (unless you ship the entire un-purged CSS file to production, even then, it's minimal).
- nomel 6y ago
  > you would need an HTML source in the tens of MB's range to cause noticeable performance problems. What? Do you ever leave the city? It seems like that’s an unsupported use case any many developers minds.
  - vntok 6y ago
    Okay now I'm growing curious, where in hell do you regularly find HTML sources that weigh tens of MBs?
    - nomel 6y ago
      My point is that it's a problem loong before you reach tens of MB, once you leave the dense cell towers and fast hard links found in a city.
gitgud 6y ago
That's a good point, but tailwind is primarily suited for component based architectures. So in this situation you would have a <my-row /> component, which would contain the tailwind classes. This reduces load time as duplication is eliminated, but I'm not sure it would reduce the render time.

yurishimo 6y ago

The render time point is misleading. It can be slower but even on low end devices, CSS is so insanely fast, you would need an HTML source in the tens of MB's range to cause noticeable performance problems. Also, CSS classes do make that even less of a problem. Inline styles are fast enough, and classes are faster by default, so Tailwind wins there. Page load times are interesting, but again, unless you're loading an insane amount of data from the server, it will never be a real issue. Some sort of component architecture solves the problem you bring up w/ duplication. You should never be writing the same thing 100x over. JS frameworks all render 100's of the same component with the same attributes and performance is fine for 99% of real use cases. The downsides for Tailwind all revolve around personal preference and how your team organizes a project. There is no performance hit (unless you ship the entire un-purged CSS file to production, even then, it's minimal).

nomel 6y ago
> you would need an HTML source in the tens of MB's range to cause noticeable performance problems. What? Do you ever leave the city? It seems like that’s an unsupported use case any many developers minds.
- vntok 6y ago
  Okay now I'm growing curious, where in hell do you regularly find HTML sources that weigh tens of MBs?
  - nomel 6y ago
    My point is that it's a problem loong before you reach tens of MB, once you leave the dense cell towers and fast hard links found in a city.

gitgud 6y ago

That's a good point, but tailwind is primarily suited for component based architectures. So in this situation you would have a <my-row /> component, which would contain the tailwind classes. This reduces load time as duplication is eliminated, but I'm not sure it would reduce the render time.