4 ms·

Author here. I implemented the commercial Tailwind "Spotlight" template with Semantic CSS and compared the differences in weight, amount of HTML and CSS, render

Author here. I implemented the commercial Tailwind "Spotlight" template with Semantic CSS and compared the differences in weight, amount of HTML and CSS, rendering speed, and best practices. I was surprised to find _that_ much overhead in Tailwind. Curious to hear your thoughts.

pcthrowaway 3y ago
Thanks for the thought-provoking comparison! I have a few questions: - Did you compare both versions of the page for feature parity across multiple browsers, devices, and breakpoints? - what exactly accounted for so much bloat with the tailwind version of the site? Was it the CSS itself, or the classes that accounted for most of the difference? If it was the CSS, did you optimize it as per Tailwind's docs[1] so that unused styles weren't included in the final page styles? - How much longer (if at all) did you take to design your selectors for the semantic version in order to reduce repetition, than you might have taken for creating the template with tailwind? - How did the final sizes compare after brotli compression? [1]: https://tailwindcss.com/docs/optimizing-for-production https://tailwindcss.com/docs/optimizing-for-production
- tipiirai 3y ago
  1. Only tested with a handful of browsers and devices 2. I did not optimize the Tailwind version. The Tailwind developers did. 3. I have no idea. I only did the semantic version. It was quick, because I have done so much CSS in my life 4. You can check that out yourself. Both sites are brotli compressed
  - twohaibei 3y ago
    4. I just checked. Its 12kB vs 4kB. But tailwind/nextjs version has a lot of files incluced (ie. svg icons) which the other extracted to separate files. Also, nextjs adds its own code that is completely unnecessary. Such as, 15 reponsive versions of the same image file, script tags at the end with the whole content in json. This comparison does not feel objective (or honest) at all to me. If you want to prove to professionals that your CSS solution is better, you need to provide much stronger evidence. Preferably ones those professionals can't disprove within 30 seconds of comparing the examples themselves.
    - tipiirai 3y ago
      True. There is some unnecessary next.js clutter in there, which I'll address on my next post. Removing that would make the HTML leaner. Likewise, removing the inline CSS from the semantic version would make it leaner.
progx 3y ago
Did or can you publish a small snippet of how Nue-CSS would be implemented in or with Nue? Can't wait to use Nue for my next project, currently wait for CSS implementation (even if it is not necessary for Nue). Project is currently in design phase, so i have luckily time.
- tipiirai 3y ago
  Glad to hear this! I'm updating the create-nue project next. It will clarify a lot of things. CSS pre-processor is the next project to be published. I don't want to give ETA, because I'll likely disappoint.
taink 3y ago
Hello, well done on your article! I have a few questions: - What exactly do you mean by "Semantic CSS"? I've never heard this terminology before (might just be OOTL). I get the parallel between this and Semantic HTML, but I guess it's not as clear what it is supposed to mean for a styling language to me. Is it just native CSS (or "pure" CSS)? At least, as a result, I have no idea what this means, or by what measures you decided what constitutes "semantics" in Tailwind's CSS: The most surprising thing is that Tailwind uses more global/semantic CSS than the semantic approach itself ¯\_(ツ)_/¯ - A small nitpick, maybe: could you somehow replace the top links to the two versions you compare with actual HTML links instead of JS events? This prevents middle-clicking and the location is replaced so it's tough to compare the two sites while reading your article. I have to click on your link, copy the url, and open that in a new tab. At least, opening the page in a new tab would be nice.
- tipiirai 3y ago
  Thanks! Semantic CSS describes an elements meaning clearly: like <form> , <table>, or <div class="gallery">. Tailwind is non-semantic because you cannot say what the element does, like for example: <a className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-80 The links are now fixed. Thanks!
  - kaba0 3y ago
    It tells exactly that it is a link.
sam_goody 3y ago
Tailwind templates are extremely verbose, because they feel it is worth to spend their time optimizing features and adding designs to trying to make their code smaller. I have often used their components as a basis, and clean up huge chunks because I feel that is in my interest for future maintainability - it is not a fault of Tailwind, but a decision they made. You can make a "semantic" design , using Tailwind where it will save you tiem or add readability, and get the best of both worlds.

pcthrowaway 3y ago

Thanks for the thought-provoking comparison! I have a few questions: - Did you compare both versions of the page for feature parity across multiple browsers, devices, and breakpoints? - what exactly accounted for so much bloat with the tailwind version of the site? Was it the CSS itself, or the classes that accounted for most of the difference? If it was the CSS, did you optimize it as per Tailwind's docs[1] so that unused styles weren't included in the final page styles? - How much longer (if at all) did you take to design your selectors for the semantic version in order to reduce repetition, than you might have taken for creating the template with tailwind? - How did the final sizes compare after brotli compression? [1]: https://tailwindcss.com/docs/optimizing-for-production https://tailwindcss.com/docs/optimizing-for-production

tipiirai 3y ago
1. Only tested with a handful of browsers and devices 2. I did not optimize the Tailwind version. The Tailwind developers did. 3. I have no idea. I only did the semantic version. It was quick, because I have done so much CSS in my life 4. You can check that out yourself. Both sites are brotli compressed
- twohaibei 3y ago
  4. I just checked. Its 12kB vs 4kB. But tailwind/nextjs version has a lot of files incluced (ie. svg icons) which the other extracted to separate files. Also, nextjs adds its own code that is completely unnecessary. Such as, 15 reponsive versions of the same image file, script tags at the end with the whole content in json. This comparison does not feel objective (or honest) at all to me. If you want to prove to professionals that your CSS solution is better, you need to provide much stronger evidence. Preferably ones those professionals can't disprove within 30 seconds of comparing the examples themselves.
  - tipiirai 3y ago
    True. There is some unnecessary next.js clutter in there, which I'll address on my next post. Removing that would make the HTML leaner. Likewise, removing the inline CSS from the semantic version would make it leaner.

progx 3y ago

Did or can you publish a small snippet of how Nue-CSS would be implemented in or with Nue? Can't wait to use Nue for my next project, currently wait for CSS implementation (even if it is not necessary for Nue). Project is currently in design phase, so i have luckily time.

tipiirai 3y ago
Glad to hear this! I'm updating the create-nue project next. It will clarify a lot of things. CSS pre-processor is the next project to be published. I don't want to give ETA, because I'll likely disappoint.

taink 3y ago

Hello, well done on your article! I have a few questions: - What exactly do you mean by "Semantic CSS"? I've never heard this terminology before (might just be OOTL). I get the parallel between this and Semantic HTML, but I guess it's not as clear what it is supposed to mean for a styling language to me. Is it just native CSS (or "pure" CSS)? At least, as a result, I have no idea what this means, or by what measures you decided what constitutes "semantics" in Tailwind's CSS: The most surprising thing is that Tailwind uses more global/semantic CSS than the semantic approach itself ¯\_(ツ)_/¯ - A small nitpick, maybe: could you somehow replace the top links to the two versions you compare with actual HTML links instead of JS events? This prevents middle-clicking and the location is replaced so it's tough to compare the two sites while reading your article. I have to click on your link, copy the url, and open that in a new tab. At least, opening the page in a new tab would be nice.

tipiirai 3y ago
Thanks! Semantic CSS describes an elements meaning clearly: like <form> , <table>, or <div class="gallery">. Tailwind is non-semantic because you cannot say what the element does, like for example: <a className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-80 The links are now fixed. Thanks!
- kaba0 3y ago
  It tells exactly that it is a link.

sam_goody 3y ago

Tailwind templates are extremely verbose, because they feel it is worth to spend their time optimizing features and adding designs to trying to make their code smaller. I have often used their components as a basis, and clean up huge chunks because I feel that is in my interest for future maintainability - it is not a fault of Tailwind, but a decision they made. You can make a "semantic" design , using Tailwind where it will save you tiem or add readability, and get the best of both worlds.