Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind vs. Semantic CSS

nuejs.org

Post reply on HN
Print view View original

41–50 of 211 posts

Re: Tailwind vs. Semantic CSS

#41

Post by tipiirai »

pcthrowaway wrote: post #28
tipiirai wrote: post #2

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.

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…

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

Re: Tailwind vs. Semantic CSS

#42

Post by gherkinnn »

sbergot wrote: post #38
gherkinnn wrote: post #5

This is one of the first Tailwind vs * articles that isn't bad. It makes a good case in the analysis. For a lot of applications (like a blog), what the author calls "semantic CSS" is the right thing to do. But there comes a point at which it is no longer feasible. We have a long history of SMACSS, object oriented CSS, BEM, CSS Modules, scoped CSS, and now Tailwind to make it work. > Because mastering CSS requires pra…

No this article is flawed. It fails to recognize the fact that css and html are always coupled in one direction or another. With tailwind the css is fixed and the html is designed around it. With semantic the html is first created and then you write your css around it. The fact is that updating css in a big project and a big team is very difficult. Rules are scoped globally. It only takes a junior making a few design…

> "just don't make mistakes". Mistakes will be made.

Is kinda what I said.

Re: Tailwind vs. Semantic CSS

#43

Post by tipiirai »

sbergot wrote: post #38
gherkinnn wrote: post #5

This is one of the first Tailwind vs * articles that isn't bad. It makes a good case in the analysis. For a lot of applications (like a blog), what the author calls "semantic CSS" is the right thing to do. But there comes a point at which it is no longer feasible. We have a long history of SMACSS, object oriented CSS, BEM, CSS Modules, scoped CSS, and now Tailwind to make it work. > Because mastering CSS requires pra…

No this article is flawed. It fails to recognize the fact that css and html are always coupled in one direction or another. With tailwind the css is fixed and the html is designed around it. With semantic the html is first created and then you write your css around it. The fact is that updating css in a big project and a big team is very difficult. Rules are scoped globally. It only takes a junior making a few design…

Author here. You are right: HTML and CSS are always coupled. The major difference is that Tailwind embraces tight coupling and semantic CSS embraces loose coupling. Please check the "Best practises" section:

https://nuejs.org/blog/tailwind-vs-semantic-css/#best-practi...

Re: Tailwind vs. Semantic CSS

#44

Post by vbezhenar »

So given the popularity of tailwind I can conclude with confidence, that semantic movement has failed. HTML does not need semantics (because every big site is absolutely filled with divs) and CSS does not need semantics either. Spending time thinking about semantics is wasting time.

Re: Tailwind vs. Semantic CSS

#46

Post by k4runa »

tipiirai wrote: post #4
k4runa wrote: post #3

I find Tailwind really good for prototyping designs and iterating quickly, and as the design becomes more crystallised then I moved to semantic css and start to clean up the complexity. Once I've figure out that patterns and components required...

Makes perfect sense. Prototypes are all about doing something very fast and all hacks allowed. Cleanup later.

Yeah, cause I end up with like 5 different buttons designs using Tailwind, and they all have different classes but when I clean up the code later I reduce it down to one button design that fits the final theme.

Re: Tailwind vs. Semantic CSS

#47

Post by tipiirai »

progx wrote: post #36
tipiirai wrote: post #2

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.

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.

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.

Re: Tailwind vs. Semantic CSS

#48

Post by k4runa »

thom wrote: post #39
k4runa wrote: post #3

I find Tailwind really good for prototyping designs and iterating quickly, and as the design becomes more crystallised then I moved to semantic css and start to clean up the complexity. Once I've figure out that patterns and components required...

I’ve found myself wanting a Tailwind compiler that makes it easier to work like this. Iterate fast with maximum verbosity, but later extract common patterns to classes when things are more stable. Anyone aware of any tooling like this?

That would be nice, like a Webstorm / editor feature that detects when you re-use code and recommends abstracting it. I would love that to be able to detect that like "Hey these buttons all share these features, let's refactor it for you"

Re: Tailwind vs. Semantic CSS

#49

Post by tipiirai »

izietto wrote: post #26

What about a mix of them? Which is actually something Tailwind expects you to do at some point, AFAICT: https://tailwindcss.com/docs/reusing-styles

Seems legit. I personally use a mix of semantic class names and utility class names. But without Tailwind.

Re: Tailwind vs. Semantic CSS

#50

Post by k4runa »

progx wrote: post #18
k4runa wrote: post #3

I find Tailwind really good for prototyping designs and iterating quickly, and as the design becomes more crystallised then I moved to semantic css and start to clean up the complexity. Once I've figure out that patterns and components required...

But who really work like this? The most people and company would not do this extra work and use tailwind for finished products too.

I figure most startups would build an MVP in two weeks and then rebuilt it later or move onto the next version and clean it up a bit in each version that follows.
Post reply on HN