Hacker News Reader

Comment by emmanueloga_ | Hacker News Reader

> I am not tightly following what's going on in CSS land, since blogs are not the thing and mailing lists became spam lists I don't know where to "listen".

Two resources:

* https://2023.stateofcss.com/en-US/features/

* https://tailwindcss.com/

Keeping track of TailwindCSS updates is nice, even for non-users: since they "live and breathe" CSS, seeing what they are up to is a good strategy to stay current with CSS developments.

Apart from discovering new things, I also learned some obscure CSS features from TW. For instance, I learned about the "isolation" property [1], which is useful for managing stacking contexts in those hair-tearing situations where the "z-index" won't cooperate as expected.

1: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

View on HN

I really wouldn’t say Tailwind does anything that resembles living and breathing CSS.

Their entire value proposition is making shit copy and pastable by ignoring the “C” in CSS and then doing further things to kind of reduce how much you need to know about writing CSS like just making everything a class for example.

I know a lot of people like it but it’s considered a very flawed solution in a lot of ways by people who have a decent working knowledge of CSS to begin with.

Don’t get me wrong I see the appeal of it but the implementation I think leaves a lot to be desired.

> I really wouldn’t say Tailwind does anything that resembles living and breathing CSS.

@scope itself doesn't resemble traditional CSS. In fact, @scope is not even generally available, since FF doesn't implement it yet.

> Their entire value proposition is making shit copy and pastable by ignoring the “C” in CSS

The scoping problem in CSS is well-known, and one could argue that the "C" in CSS can often be one of its biggest flaws. Cascading is complex and hard to use. I like how @scope addresses this issue!

If you have the problem that @scope solves (and you'll have it if you write non-trivial webapp), and you want something that will work today across browsers, an alternative solution you should try is Tailwind.

> and then doing further things to kind of reduce how much you need to know about writing CSS

I've been thinking of TW as an "APL for CSS": it is this cool shorthand system where a bunch of little utility classes can generate a lot of CSS properties for you. But you still 100% need to understand what your shorthand is doing.

> Don’t get me wrong, I see the appeal of it, but the implementation I think leaves a lot to be desired.

No tool is perfect, but in my experience, Tailwind has made building complex web apps a lot more enjoyable.

> I know a lot of people like it but it’s considered a very flawed solution in a lot of ways by people who have a decent working knowledge of CSS to begin with.

I wasn’t swayed by the popularity of Tailwind or the opinions of CSS experts. I decided to form my own opinion, and I'm glad I did! (I was skeptical too for a long time).

I’m typically a late adopter—I prefer to wait until the rough edges of a tool have been smoothed out, but/and I've been using TW 4.0 (in alpha) for about three months, and even with a long career of writing CSS in more traditional way, and also things like Sass, CSS-in-JS, etc, etc, my current assessment is that TW is a more enjoyable way to write web apps.

Locality of behavior is the main thing that makes it so enjoyable for me. Things like shadow DOM and @scope are steps in that direction. Maybe someday newer web standards will make TW obsolete, but for now, it is my preferred way to style web apps.

You're right in that it undoes the cascading bit, but that's the bit that a lot of people don't want. The updates to CSS are rarely about how it cascades, so it _does_ follow the majority of updates.

Also, if you look at the docs, the mapping between class and styles are the first thing you're given. IMO it doesn't hide anything about the models browsers use to build things like grids, for example

Depends on the website. For my personal blog it is the most amazing thing. For a web application it is the most annoying thing.

In component-based apps/systems C in CSS is often the last thing you want, if you ever want that.

I know people get incredibly upset whenever this gets mentioned because suddenly they DO want it again but that was a big part of what “web components” were. When you need that level of isolation you can get it for free without any extra work.

Web Components are doing much more with isolation than just isolating styles.

You don't want/need to kill your a11y, form participation, and a bunch of other things (and laboriously solve them with Javascript) just because you want to scope your styles

Form participation has been fixed for a while now for the record.

Yes, you have to manually set it up with javascript, or use a lib/framework that solves it for you automatically.

Too much hassle when all you need is style scoping

This guy is absolutely right - the C in CSS stands for cascading.

What Tailwind is doing is rewriting the whole thing that CSS is and putting it into easy-to-write classes. This could be handy to you, yes, but unfortunately you're missing the whole point of CSS which is to have cascaded stylings.

To help you understand this a little bit better, one could have a look at why CSS was invented and where it comes from:

In the desktop publishing world (books, newspapers, etc.) this kind of cascading layout rules were used long before there was the first HTML page on the web. This should be nothing to be mixed up with regular programming. Change your view on that thing and you will understand.

It may sound harsh but Tailwind is a way to tell "I'm a programmer, I don't understand CSS and I'm not further interested into".

Cascading may be good for publishing, but the many benefits of cascading don't really play in your favor when you are trying to use the web as a platform to make _applications_. Documents are mostly static; apps have a lot of moving parts. Apps are a lot more complex than documents.

Reply on news.ycombinator.com