We don’t have “regular” nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn’t mention anything about media queries. I’d hope we get that right out of the gate if we ever do get native CSS nesting. In fact, I’d trade it for selector nesting in a heartbeat. I’d say that’s the most useful thing a CSS preprocessor like Sass does today.
But I’ve digressed before I even began. You can nest media queries in native CSS, as long as you’re doing it from the root. It’s funny to see in native CSS, but it works!
@media screen {
@media (min-width: 1px) {
@media (min-height: 1px) {
@media (max-width: 9999px) {
@media (max-height: 9999px) {
body {
background: red;
}
}
}
}
}
}
One thing I wish CSS did natively (which I currently do in sass) is to support media queries to be nested inside selectors, like so
It flips the logic around to “The .foo-bar element has styles when view is more than 800px” vs “When the view is more than 800px, the elements within (including .foo-bar) have these styles”
A lot of times I see a behemoth media query that has literally every style adjustment for any selector in that screen size. When you have to move code around, you may leave some parts behind. Containing it this way makes the code more modular, every style for that element is contained in one parent bracket pair.
I’ve taken a couple of years off from code but have just started a new project where I wanted too try a few new ways to develop. Instead of reaching for scss, I’ve landed on
postcss-preset-envwhich includes the draft spec mentioned in Chris’ post.It allows me to write this (which also includes custom-media types)
Which is pretty incredible. Perhaps one day I’ll be able to remove the post processor step and my code will still work – I guess we’ll see!
console.log(
max height=54px)
What exactly does “doing it from the root” mean?