4 ms·

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, d

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.

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.