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

101–110 of 211 posts

Re: Tailwind vs. Semantic CSS

#101

Post by audessuscest »

tipiirai wrote: post #35
audessuscest wrote: post #27

That example with a million div for the nav with tailwind is so ridiculous. I agree with the conclusion but that first example is so grotesque that it made me discard the whole article One other advantage of tailwind is that it makes it easier to work collaboratively with people of different css level and it requires less review, less possible side effect. But it's clear to me that clean semantic well developed css i…

> that first example is so grotesque It's the actual HTML code in the sites that are compared

I'm pretty sure it's not realistic, there's nothing that justify so many div because of tailwind

or the person who developed that with tailwind just love having dozens of div for a simple header > nav > a

Re: Tailwind vs. Semantic CSS

#102

Post by tipiirai »

monooso wrote: post #77

> Where is the source code? > I’m working on it! Presumably the author must have already written the code in order to draw the conclusions in the article. Not releasing this code, makes me question (1) the conclusions, and (2) whether the HN comments will prompt him to update the code, but not the article or conclusions. The author mentions "not wanting the overhead of an open source project" to delay publication, wh…

Fair enough. Gimme few days, please!

Re: Tailwind vs. Semantic CSS

#103

Post by tempmac »

jonwinstanley wrote: post #89
jongjong wrote: post #85

This perfectly summarizes what I've been saying. Popular tools are not the most effective ones. The people who are leading our current tech monoculture are not qualified to be making such decisions and imposing them on such large numbers of people. The artificiality of our current tech culture is obvious. It doesn't feel organic, not free market.

Presumably tools only get popular if people find them useful though? As in, if no-one saw value in them then no-one would use them?

hmm maybe it's more related to marketing and who got the vc money first?

Re: Tailwind vs. Semantic CSS

#104

Post by tommiegannert »

The tooling around CSS has evolved quite a bit since we started the "one-rule-one-class" approach to styling (Bootstrap released in 2011.) When the best web frameworks can deal with attributes, but not with CSS rules, it makes sense that's where we go.

But then you see a fork in the ecosystem, where some continue working on the semantical side, and some just want "Bootstrap, but with X and Y, so I can finish my project". I think the article argues against continuing down this latter branch.

With CSS preprocessors, variables, media queries, calc(), transitions, animations, layers, no IE, etc. we're in a very different position today. Everyone's now used to using JS bundlers, i.e. a build step. Webpack was released in 2014. Accepting that source and distribution are separate makes it much easier to motivate going for a preprocessor and being able to write nice CSS.

Re: Tailwind vs. Semantic CSS

#105

Post by jstummbillig »

azangru wrote: post #97

> The semantic version is smaller because it utilizes high-level, semantic components like .nav What is the purpose of writing if you can just write ? There seems to be only one navigation element on that page, and the class isn't adding anything that is not already expressed by the tag name.

Scalability and specificity.

1) You can absolutely not be sure you would not later want to use something as generic as nav in a different context. Being heavy handed with element selectors is a solid foot gun for scaling css.

2) Different selectors produce different specificity in css. To not write selectors that will later be overwritten, opting for class selectors is often a good idea.

Re: Tailwind vs. Semantic CSS

#106

Post by tipiirai »

azangru wrote: post #97

> The semantic version is smaller because it utilizes high-level, semantic components like .nav What is the purpose of writing if you can just write ? There seems to be only one navigation element on that page, and the class isn't adding anything that is not already expressed by the tag name.

There are exactly four elements on the front page. The ".nav" class is given for the master navigation elements in the page header and footer. class="master nav" and class="sub nav" respectively. Maybe not the best, but something I am personally accustomed to. Semantic CSS allows you to create a custom naming system.

Re: Tailwind vs. Semantic CSS

#107

Post by twism »

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...

To me you are adding complexity. Back to finding which styles are cascading over another.

Tailwind is somewhat like lisp in the aspect that people usually don't get what all the hoopla is about. All they see is parenthesis and want a "lisp" without the parenthesis once they figure out polish notation

Re: Tailwind vs. Semantic CSS

#108

Post by martypitt »

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?

I love that idea, and would definitely use it.

In fact, if there's enough interest, I'd probably build it too...

Re: Tailwind vs. Semantic CSS

#109

Post by sbergot »

tipiirai wrote: post #54
sbergot wrote: post #52

Earlier quoted context omitted.

This section is what I am talking about. You compare two methods of writing components and then declare that the tailwind version is tightly coupled but the semantic version is loosely coupled. In programming lingo this means tailwind is bad and semantic is good. But you don't explain why the tailwind version is tightly coupled and the semantic version is loosely coupled. And you don't do it because it is simply not…

So ` ` is loose coupling, because the styling is not coupled directly into the element. You can completely switch the gallery design, by switching (or overriding, or modifying) the external stylesheet.

It is still coupled because the css will need to know the html structure in order to work. If you update the html, you probably need to update the css.

Re: Tailwind vs. Semantic CSS

#110

Post by tipiirai »

Falmarri wrote: post #72
tipiirai wrote: post #63

Earlier quoted context omitted.

Bear in mind that the Tailwind example is the official template made by the Tailwind developers themselves. It is the prime example of Tailwind and it's benefits and best practises. (Should be at least)

Why do you think this example is supposed to be the pinnacle of what the most performance and optimized tailwind can be?

I just took the first one from the official Tailwind templates. What would you suggest?
Post reply on HN