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

WebKit Supports Nested CSS

webkit.org

Post reply on HN
Print view View original

1–10 of 183 posts

Re: WebKit Supports Nested CSS

#2

Post by chrisweekly »

"CSS Nesting will work just like Sass, but with one new rule: you must make sure the nested selector always starts with a symbol."

I think I like it. In general I like the adoption of good features like this. But. It's getting awfully hard to keep track of CSS vs SASS syntax. Starting a greenfield project today I'd leave SASS out of it... but I'm usually working on projects where SASS is already present. Shrug.

Re: WebKit Supports Nested CSS

#3

Post by culi »

> Back in December, we wrote an article detailing three different options for CSS Nesting.

> Web developers responded to the poll with great clarity. Option 3 won in a landslide.

Yup, pretty much. The only thing I really wish won however was making the beginning "&" always required for nesting. Instead you're able to omit it if there's any other symbol. Example from article:

  main {
   .bar { ... }
   #baz { ...}
   :has(p) { ... }
   ::backdrop { ... }
   [lang|="zh"] { ... }
   \* { ... }
   + article { ... }
   > p { ... }
   ~ main { ... }
  }
The position of requiring & was not represented in the poll but seemed really popular in all the comments and seems like it would only make the parser's job easier (both now and in the future of CSS)

Regardless I'm just happy it's finally here! Hard to see the use-cases for sass in 2024 but, like jQuery, it's definitely made its mark on the history of the development of web standards

Re: WebKit Supports Nested CSS

#4

Post by frosted-flakes »

Will nested CSS support mixing properties and nested rules in any order, or do all the nested rules have to grouped together at the end? Right now, I frequently write SCSS rules like this:

  .some-class {
      background: blue;
      &:hover {background: red}
      border: 1px solid;
      &:active {border: 1px dashed}
      padding: 16px;

      display: flex;
      gap: 8px;
      
      & > * {
          color: red;
      }
  }
And it would be a pity if that wasn't allowed.

The reason I ask is because I seem to remember an early proposal not allowing this, but I can't find where I read it.

Re: WebKit Supports Nested CSS

#5

Post by a1371 »

Awesome to finally have nesting. The way I see it, this took 10 years longer than it should have.

I feel the only big thing missing from the vanilla stack for me right now is a template element that multiple html files can share. Just like how you make a blog header in Jekyll or Hugo and it adds it on all your blog posts get the header. I haven't found an easy way of doing that if I have a bunch of html pages.

Re: WebKit Supports Nested CSS

#8

Post by nightpool »

a1371 wrote: post #5

Awesome to finally have nesting. The way I see it, this took 10 years longer than it should have. I feel the only big thing missing from the vanilla stack for me right now is a template element that multiple html files can share. Just like how you make a blog header in Jekyll or Hugo and it adds it on all your blog posts get the header. I haven't found an easy way of doing that if I have a bunch of html pages.

well, the classic solution has always been to use an iframe :p

Re: WebKit Supports Nested CSS

#9

Post by bruce511 »

This is an excellent step forward for css, and frankly it's nice to see safari take the lead for a change rather than lag behind.

It'll be about a year or so before I'm comfortable using it in production code (assuming it comes to Firefox soon, and presuming it'll get into Edge by default.)

But a year goes past quickly these days, and at least the clock has started ticking.

Re: WebKit Supports Nested CSS

#10

Post by JonathonW »

chrisweekly wrote: post #2

"CSS Nesting will work just like Sass, but with one new rule: you must make sure the nested selector always starts with a symbol." I think I like it. In general I like the adoption of good features like this. But. It's getting awfully hard to keep track of CSS vs SASS syntax. Starting a greenfield project today I'd leave SASS out of it... but I'm usually working on projects where SASS is already present. Shrug.

At this point, I'm using SASS pretty much exclusively for nesting (and where required to customize other styling systems-- mostly older Bootstrap). Once I can assume CSS nesting is everywhere I need it, I can probably eliminate SASS in most places where I'm using it.

(I'd also like more/better color functions out of vanilla CSS. But that's not necessarily a dealbreaker for me in most cases.)

Post reply on HN