Tailwind vs Semantic CSS
nuejs.org
Comparing two identically designed websites, their weight, amount of HTML and CSS, rendering speed, and best practices.

This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS.

  • cosmicrose@lemmy.worldEnglish
    289·
    9 months ago

    This person thinks Tailwind is just a grift to make money, prioritizes separations of concerns over all else (I contend they have SoC brain-worms, but I don’t want to get too spicy), and ignores all the actual arguments people use for Tailwind, like how it’s specifically built to suit component frameworks over someone raw-dogging that HTML and CSS. Their argument boils down to “get good” which is the argument that folks use when they’ve never been on a team and have never had to make actual trade-offs.

    • modeler@lemmy.world
      17·
      9 months ago

      Their arguments included the size of the web page, and the time to display the first content, both of which were significantly better in Nue when compared to Tailwind.

      By all means argue on what is important (because what is important for your projects may be significantly different from mine), but there were many points that the author was highlighting, not just the separation of concerns. And for my projects, all these concerns are important.

      • cosmicrose@lemmy.worldEnglish
        1·
        9 months ago

        They’re valid concerns, for sure. I have less issue with this article in particular than I do with some of the other things he’s written. In the context of his other opinions, I feel pretty dismissive of whatever arguments he presents, valid or not. He’s extremely biased and I think folks have to take everything he says with a grain of salt.

    • Kbin_space_program@kbin.social
      111·
      9 months ago

      The tailwind style of zero reusability should be quite useful to AI coding, since one its primary flaws is an inability to reuse components.

    • spartanatreyu@programming.dev
      2·
      9 months ago

      There’s absolutely a massive internal bias people have where they naturally believe that others develop the same kinds of content, when really it’s half working on page based content, and half working on component based content.

      • Page developers know that putting their styles in the content itself is a disaster when you want to make a global change.
      • Component developers know that putting their styles external to their components is a dx nightmare because developers keep making changes that they think only affects one component when it actually impacts a different component (and that change might not be found until months or years later).

      Both are correct.

      The real problem is developers thinking that there are only two methods for making styles: external css files, and tailwind/atomic styles in class names.

      Component developers should have their styles inside their components, but not inlined in style attributes (like in tailwind).

      Component developers should instead place a style tag inside their component that is scoped to just that component.

      So let’s say you’re making an accordion component.

      Make your html+js/jsx like you already do, and add an “accordion” class to your component’s root element. Now add a style tag in your component with a single selector targetting the .accordion class. Now you can use nesting to style anything in the accordion exactly how you want. Want to style something based on whether an element is open or not? Use an attribute selector. Want to style something based on whether it’s child is doing something? Use the :has() selector. etc…

      If you’re making a widget system, use container queries. If you’re making a card system, use subgrid.

      There’s so many obvious use cases that modern css provides for, so use modern css! and not any of this BEM or tailwind nonsense. Now your css is so much smaller, robust and more maintainable.

      Follow up questions:

      Q: But I don’t know modern CSS

      A: Learn, it’ll be much better for you in the long run compared to using tailwind, then needing to learn something else once people switch off tailwind for something else.

      Q: But wouldn’t putting a style tag in every component mean that there’s going to be two style tags on the page if I put two of the same component on the page?

      A: It’ll only do that if you make it do that. Most component based frameworks are already set up to reduce repetition, check your framework’s docs. (e.g. react’s many css-in-js solutions, web component’s :host selector, vue’s <style> and <style scoped> elements, SSGs like Eleventy have Asset Bucketing, and even native html is getting it’s own solution this year with @scope).