[css-mediaqueries] “inner” `@media` rules

Consider:

foo
{
    color: red;
    @media screen
    {
        background-color: blue;
    }
}

This syntax is good because:

1. It’s DRY (what if foo was a really long selector?)
2. It interacts well with nesting.
3. Not only it interacts well with custom property sets, but it allows people to do things that would otherwise be impossible. Consider:

:root
{
    --button:
    {
        color: red;
        @media screen
        {
            background-color: blue;
        }
    };
}

[LeaVerou]

Note that this is one of the things preprocessors do and authors use a lot.

[frivoal]

I think this would be useful, and the error handling of CSS Syntax should allow this evolution. An unknown @media in the middle of a rule set will simply get ignored, but will not confuse the parser, and traditional property declarations before or after the @media rule will continue to apply just fine.

I also don't think it poses any significant implementability challenge to make parsers support this, although I could be wrong about that.

LTL;DR: LGTM.

[LeaVerou]

I don't see why it shouldn't be implementable either, since all use cases I've seen (including the one in the first post) are just syntactic sugar over what can already be done.

@LeaVerou

Well, the first one might be “just syntactic sugar”, but the second one isn’t possible today, as far as I’m aware.

[LeaVerou]

Isn't it basically this?

:root
{
	--button: {
		color: red;
	}
}

@media screen {
	:root {
		--button: {
			background-color: blue;
		}
	}
}

(Then you use with @apply)

@LeaVerou

No, custom property sets don’t cascade together. In your code, the buttons would either have a red text color (when not on a screen), or a blue background color (when on a screen), but never both.

From an example in Tab’s proposal:

Note that custom property sets override each other wholly, rather than cascading together like colliding style rules do.
For example, if these two style rules applied to the same element:

.foo {
  color: red;
  background: white;
}
#bar {
  color: blue;
}

The #bar rule will win due to having a higher specificity, so its color:blue rule will apply to the element, but the background:white rule from the .foo rule also applies, since the #bar rule did not override background.

However, if these were instead defined as custom property sets:

.foo {
  --my-theme: {
    color: red;
    background: white;
  };
}
#bar {
  --my-theme: {
    color: blue;
  };
}

Then when an element uses the --my-theme custom property set, it will receive only the color:blue declaration. The background:white declaration from the .foo rule is ignored completely, as its rule lost the specificity battle.

In my code, on the other hand, buttons would always have a red text color.

[LeaVerou]

Interesting, I was not aware of that, thanks! I wonder why @tabatkins went with that. Is it easier to implement? Does it satisfy more use cases? Does it produce an easier mental model? These are not rhetorical questions, I honestly don't know. But I'd love to hear his reasoning when he comes back!

I wanted to mention that now that custom property sets have been abandoned (for quite a while, even), it should be more feasible to spec and implement this. At the same time, it might not be as useful, but I still feel like there is an ergonomic benefit for authors.

[tabatkins]

Yes, nesting @media into style rules should definitely be feasible. The main blocker is the CSSOM work to allow style rules to have child rules, which is already happening for @nest rules.