DEV Community

CSS nesting is coming

Alvaro Montoro on January 15, 2023

Browsing caniuse.com the other day, I found a pleasant surprise: a little green flag in a red box for a feature I'd been waiting for a long time. ...

Read full post

𒎏Wii 🏳️‍⚧️ • Jan 16 '23

Would it be too pessimistic to say "Meh, firefox will probably just kill it like every other good thing in the web"?

I'm probably being a bit hard on firefox here, but JFC every single feature I want seems to be waiting for them to finally implement it.

Ivan Jeremic • Jan 18 '23

You mean Safari

Alvaro Montoro • Jan 18 '23

I ha(v/t)e to admit that Safari has been doing a good job lately. While it is way behind in features and options, some of the latest CSS things pop up on Safari first... which doesn't make much sense, but oh well...

𒎏Wii 🏳️‍⚧️ • Jan 18 '23

Doesn't safari actually still have TCO in its javascript engine, even though firefox unilaterally decided to kill that feature for no reason whatsoever?

Automatically x3 times better if you ask me

NLxDoDge • Jan 16 '23

The main reasons I use SCSS/SASS is because of nesting and variables. If they fix those two we are getting closer to not needing to compile everything, that would be huge.

But I have some other things, like functions or using a variable in a function call that I really like to see as well.

𒎏Wii 🏳️‍⚧️ • Jan 16 '23

What do you need variables for that you cannot do with custom properties already?

NLxDoDge • Jan 17 '23 • Edited

I had some issues with trying to make the border of div transparent but not the element itself (else a opacity filter would have worked).

So instead I wanted to do:

div {
    border-color: argb(#123123, 0.4);
}

But then with a variable instead as I wanted to make a light and dark togglable theme. But I found out that using css variables in this context doesn't work.

:host {
    --test: #213213;
}

div {
    border-color: argb(var(--test), 0.4);
}

Maybe I am doing something wrong (or Firefox doesn't allow this?).

𒎏Wii 🏳️‍⚧️ • Jan 18 '23 • Edited

Well, no, that doesn't work, because argb isn't a thing, and if you want to use rgb you'll have to provide R, G and B separately.

What you can do, for example:

:host {
   --theme-hue: 140deg;
   --theme-saturation: 20%;
   --theme-lightness: 10%;
}

div {
   border-color: hsl(
      var(--theme-hue),
      var(--theme-saturation),
      var(--theme-lightness),
      0.4
   );
}

and I'm 90% sure you can combine those three variables into a --theme-hsl variable somehow but cba to test it right now so won't include it in the code.

EDIT: And of course, once CSS Color Module Level 5 becomes a thing, you can just do

my-element {
   --test: #123123;
   border-color: rgb(from var(--test) r g b 0.2);
}

NLxDoDge • Jan 18 '23

Thanks for your explanation, I don't really do front-end that much (I do Java backend at work) but I never knew you could to things like this. Thanks!

Mike Ritchie • Mar 2 '23

argb isn’t a thing as mentioned, but rgba is, which is what you’re writing in the sample code anyways. R G and B go from 0 to 255, and A goes from 0.0 to 1.0

fruntend • Jan 16 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Waleedh Nihal • Jan 18 '23

Cool makes work much easier 👍🏽!

O.T.A • Jan 17 '23

Css is going to get much easier now, thank you for sharing, can't wait for this feature :)

Michael Kettel • Jan 16 '23

I was using sass/scss just because it is so much better to have nested css instructions. Love to see this feature becoming a standard...

Tobi • Jan 18 '23

This is a nightmare. Css should only define styles, not handle logic. Javascript is enough logic to handle already

Alvaro Montoro • Jan 18 '23

How is this logic?

Tobi • Jan 18 '23

If (thing a is nested in thing b)
Apply style to thing a

Now what if I don't want to use thing b anymore but thing a? Then I have to change the css file, even though that makes no sense at all

Alvaro Montoro • Jan 18 '23

That is how it happens right now in CSS when you put two selectors together (even without the nesting):

.car {
  width: 200px;
}

.car .door {
  color: red;
}

Those styles apply to the .door in a .car, but not to a .door inside a .house.

With CSS nesting this will be more evident for the developer:

.car {
  width: 200px;

  .door {
    color: red;
  }
}

It's just syntactic sugar that helps keep the code more organized and clean. The main danger is getting into the curly braces hell.

Tobi • Jan 18 '23

Fair enough. Still I would rather move in a direction where logic is handled in Javascript and css is styling and only styling. Just today I had to debug some complex sass function. That's hell. But of course this is subjective

Peter Carter • Apr 2 '23 • Edited

Nesting is not logic in any way that makes the code more difficult to read when used properly and doesn't muddy seperation of concerns in any meaningful way. Once you get really adept at SCSS/Sass you start to be able to nest in ways that are intuitive, elegent and make the code a joy to read and reason about.

If you're having to debug a complex Sass function that's not intuitive, it is 100% not an issue with nesting, and everything to do with the developer not doing stuff properly. If you're struggling here then SonarCloud has some really neat features for helping to organise such code. If it's really bad it'll throw a proper riot-tantrum initially, but if you can find anyone good enough to actually fix issues it flags then you'll see what good nesting does for you.

𒎏Wii 🏳️‍⚧️ • Jan 18 '23 • Edited

@alvaromontoro by the way, thoughts on @scope?