Not implemented in Firefox yet, but they like it: https://github.com/mozilla/standards-positions/issues/695
They're tracking work in https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
WebKit Supports Nested CSS
141–150 of 183 posts
Re: WebKit Supports Nested CSS
#142Earlier quoted context omitted.
> Hard to see the use-cases for sass in 2024 Modules make writing CSS much less of a naming game. Anything you can do to reduce one of the 2 hardest problems in CS is worth it.
Or build a design system with good names and take advantage of the global nature of standard CSS.
How, exactly? Naming aside, splitting things into separate files is often useful, and making the browser fetch multiple files for the base stylesheet is always going to be worse than packing it into a single file.
Re: WebKit Supports Nested CSS
#143Earlier quoted context omitted.
Or build a design system with good names and take advantage of the global nature of standard CSS.
How, exactly? Naming aside, splitting things into separate files is often useful, and making the browser fetch multiple files for the base stylesheet is always going to be worse than packing it into a single file.
Global means more reach, local means more specifity. Design systems are global by nature. Has nothing to do with file splitting / packing.
Re: WebKit Supports Nested CSS
#144Earlier quoted context omitted.
It's great that parts of SCSS are getting superseded by CSS. Nesting is great to avoid selector repetition. Custom properties (CSS variables) and CSS functions give us tools to avoid magic numbers and to encode layout relationships. New sets of selectors and container queries let us decouple and re-use declarations more. CSS Houdini gives us further power in extending CSS functionality. Of course there are things tha…
> SCSS are getting superseded by CSS. Reminds me of how Coffeescript died out because its best ideas got integrated into Javascript. What I want to know is: how the hell did this take so long? Nesting is such an obviously useful feature to have in CSS, and once I'd experienced it in SASS I never wanted to be without it. Why did it take 10+ years for this to be introduced to CSS, especially when other browser-based te…
Some of the Less/Sass maintainers are also active parts of the communities that write the specs and I guess when the idea of nesting was fresh to these preprocessors they didn't feel compelled to make it a core part of css with how widely the preprocessors were getting adopted. While I don't doubt our computers 10+ years ago could parse through nested styles it's probably really trivial now and thus being implemented into core.
As far as the speed of which things get implemented, I often feel there is a lack of understanding where design and development overlaps. Most devs are just devs in the sense they solve algorithmic/browser rendering problems, and don't really dabble enough with markup/styling languages like HTML and CSS to hit the pain points of using them. And the people that deal with markup/styling do not know the proper channels to rally behind some of the ideas that would make their lives easier. Unfortunately, there are less individuals that are proficient at markup, styling, and programming (not just in the sense of coding in JS/TS, but understanding the internals of the browser and programming for it), and the unicorns that do understand are often snatched up by Google/Microsoft/etc. which often have their own agendas. I feel there's just a lot more niche backdrop knowledge that is required to get the ball rolling. These are just my feelings on this matter, I could be wrong.
Re: WebKit Supports Nested CSS
#145Earlier quoted context omitted.
For me this is where something like PostCSS shines. You simply write future css and remove the plugin when it’s supported natively. This wins in my opinion because there shouldn’t be any conversion necessary from something like Sass to CSS
What's the hit/miss rate on that CSS changing syntax? I Vaguely recall something similar happening with decorator syntax/how it worked in JS/typescript. Or do you keep to CSS features that are locked down in terms of spec, just waiting on implementation to roll out?
That decorator syntax thing was a mess. The original syntax seemed like it was far enough along. Many folks adopted it because it seemed like "a sure thing". I ended up pulling it from a project in 2017 because so few of the folks on my team wanted to truly understand what problem those were meant to solve. It was easier to "decorate" in a more manual way (wrapping a function with a function).
The way TC39 handles stages now should stop things like that from happening. (You implement a Stage 1 or 2 feature fully knowing it could change)
Re: WebKit Supports Nested CSS
#146This half assed version of nesting is lame, as are all the others. Just give us SCSS its been ten years now, pave the cowpath.
What's the difference between this and SCSS nesting? It seems pretty full-featured to me. What's missing?
dialog {
background-color: white;
color: black;
input {
width: 200px;
}
}
Re: WebKit Supports Nested CSS
#147One thing worth noting is that & substitutes for `:is(...)` in spirit under the hood, which means there are some significant behavior differences between native CSS nesting and Sass.
Here's one:
.foo .bar {
.baz & {
color: red;
}
}
.baz .foo .bar {
color: red;
}
.baz :is(.foo .bar) {
color: red;
}
...
...
...
...
Re: WebKit Supports Nested CSS
#148Related:
Help choose the syntax for CSS Nesting - https://news.ycombinator.com/item?id=34006622 - Dec 2022 (159 comments)
Updated CSS Nesting Syntax to Avoid Common Copy-and-Paste Errors - https://news.ycombinator.com/item?id=33537539 - Nov 2022 (1 comment)
CSS Nesting - https://news.ycombinator.com/item?id=33424361 - Nov 2022 (2 comments)
Help pick a syntax for CSS nesting - https://news.ycombinator.com/item?id=32248419 - July 2022 (240 comments)
CSS Nesting Module - https://news.ycombinator.com/item?id=28375596 - Sept 2021 (71 comments)
CSS Nesting Module - W3C Editor’s Draft - https://news.ycombinator.com/item?id=27684332 - June 2021 (1 comment)
You Probably Shouldn't Be Nesting Your CSS - https://news.ycombinator.com/item?id=6583109 - Oct 2013 (1 comment)
WebKit to get CSS variables, mixins, nesting? - https://news.ycombinator.com/item?id=2111510 - Jan 2011 (6 comments)
Re: WebKit Supports Nested CSS
#149One thing worth noting is that & substitutes for `:is(...)` in spirit under the hood, which means there are some significant behavior differences between native CSS nesting and Sass. Here's one: .foo .bar { .baz & { color: red; } } In Sass, that would compile to: .baz .foo .bar { color: red; } With native nesting, it effectively compiles to: .baz :is(.foo .bar) { color: red; } The Sass version matches this DOM struct…
Agree important to note the difference but I personally prefer the nested CSS behavior. Much more sensible to use `&` as a logical operator
Re: WebKit Supports Nested CSS
#150This syntax matches the CSS Working Group's recommendations, is that correct?
> "starting the nested selector with an identifier is invalid"