Live data from Hacker News

Inline Scope for CSS

picostitch.com

21–30 of 43 posts

Re: Inline Scope for CSS

#21
post #12

> 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 deve…

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 w…

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

Re: Inline Scope for CSS

#22
post #13

Friendly reminder that inline CSS is unsafe and should be avoided. https://stackoverflow.com/questions/41925390

Wait WTF, `javascript:` URLs are acceptable in the CSS `url` property??

From the SO post:

> url('javascript: eval(evil)');

Re: Inline Scope for CSS

#23
post #17
post #12

Earlier quoted context omitted.

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 w…

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

[deleted]

Re: Inline Scope for CSS

#24
post #12

> 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 deve…

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 w…

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

Re: Inline Scope for CSS

#25
post #7
post #2

Firefox is planning on it: https://bugzilla.mozilla.org/show_bug.cgi?id=1830512

They're always planning things and always last at things. Even for the most visible and painful cross-browser issues, they always last. One thing being service workers on extensions: available in Chrome since 2020 and we're closing 2024 still without them in Firefox. https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

Surprising that Firefox is lagging behind Safari

Re: Inline Scope for CSS

#26
post #18
post #9

For now, as Firefox support is not yet good, We can use nested rules in CSS. HTML: This is a paragraph CSS: my-custom-element { p { color: blue; } } By choosing a unique name for the custom element, we achieve near the same functionality as @scope.

Is this not the same as having a class with a unique name, and applying it to a parent div

[dead]

Re: Inline Scope for CSS

#28

I wish they made this an attribute on the element. :root { /* the section style */ } span { color: blue; } The whole :scope inside @scope is odd to me.

I guess @scope > :scope would help you know what the CSS is doing even if you don't know where the CSS is being inserted... but I can't imagine that being a problem in practice.

Re: Inline Scope for CSS

#29

I wish they made this an attribute on the element. :root { /* the section style */ } span { color: blue; } The whole :scope inside @scope is odd to me.

I agree, when I saw the I also thought this would have been the coolest. But I guess there have been considerations and discussions about it. I just don't know where.
Post reply on HN