WebKit Supports Nested CSS

Post by culi » Thu, Feb 16, 2023, 4:29 AM UTC

LAC-Tech wrote: post #15

Whenever I see nested CSS, I always think the non-nested version is cleaner. Then again, I'm lucky enough to often work with my own 'hand-crafted', semantic html, and not some div soup generated by a tool.

  .page form
    border: 2px solid #223;
    border-radius: 0.15rem;

    & button {
      background-color: red;
      transition: background-color 0.15s ease;
    }

    &:hover button {
      background-color: blue;
    }
  }

Post by rockwotj » Thu, Feb 16, 2023, 4:31 AM UTC

culi wrote: post #3

> 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) {…

Post by rockwotj » Thu, Feb 16, 2023, 4:32 AM UTC

JonathonW wrote: post #10

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 by culi » Thu, Feb 16, 2023, 4:37 AM UTC

frosted-flakes wrote: post #22

culi wrote: post #14

Earlier quoted context omitted.

PostCSS has supported CSS nesting for many years now. The nesting standard has changed pretty minimally over the years and the PostCSS team has done an excellent job keeping up One of the main reasons I never used CRA for my miniprojects was because the first thing I always wanted to do was set PostCSS up with nested CSS support which was a pain to do in CRA

What do you use now? I'm currently using Create-React-App for one of my projects and some parts of it are really frustrating. For example, you can't create a Web Worker script without ejecting, or using some tool that intercepts and alters the CRA Webpack configuration. Should I just bite the bullet and figure out Webpack (or another bundler) from the basics? I feel like that will be inevitable at some point anyway.

Post by throwaway284534 » Thu, Feb 16, 2023, 4:40 AM UTC

frosted-flakes wrote: post #22

culi wrote: post #14

Earlier quoted context omitted.

PostCSS has supported CSS nesting for many years now. The nesting standard has changed pretty minimally over the years and the PostCSS team has done an excellent job keeping up One of the main reasons I never used CRA for my miniprojects was because the first thing I always wanted to do was set PostCSS up with nested CSS support which was a pain to do in CRA

What do you use now? I'm currently using Create-React-App for one of my projects and some parts of it are really frustrating. For example, you can't create a Web Worker script without ejecting, or using some tool that intercepts and alters the CRA Webpack configuration. Should I just bite the bullet and figure out Webpack (or another bundler) from the basics? I feel like that will be inevitable at some point anyway.