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. Since I can't I use

• shripadk 6y ago
  > 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.
• cosmotic 6y ago
  Style attributes have very high specificity so they basically preclude using normal CSS files (they would mandate every line include !important)
  • gitgud 6y ago
    This is misleading, !important is not required to use inline styles. They still cascade normally like CSS classes... see this example: <div style="color: red"> <p>red text</p> <p>red text</p> <p style="color: blue">blue text</p> </div> Ironically, it's actually complex CSS classes and long selectors that produce high specificity, which then requires even more specificity to override and eventually the dreaded !important
    • SahAssar 6y ago
      The parent is not talking about inheritance. They are talking about specificity.
    • cosmotic 6y ago
      If an element has a style attribute that sets the color, it will override every single CSS/Style-element style that also sets the color, unless the CSS/Style-element style also includes an !important.