Description
Based on the discussion here: https://twitter.com/innovati/status/946155332719599622
The new proposed syntax (that'll be mostly adopted by eqcss too if everything goes well):
.Container {
...
}
@container .Container (width >= 320px) {
.Element {
...
}
}(Whether the query's name will be @container or @element is not decided yet, so I'll support both for the time being.)
Where @container applies styles to elements inside the element, given by the selector.
The following should be possible too, although not BEM-like, and not encouraged by this particular project:
@container .some-selector .Container (width >= 320px) {
.some-selector .Element {
...
}
}
This makes the job of preprocessors slightly harder though, since it's a bit hard to decide where the boundary is between container-selector and element-selector.
Consider the following:
.wrapper {
.Container {
...
.another-selector {
.Element {
@container (width >= 320px) {
...
}
}
}
}
}
With @media queries, a prerpocessor would lift the media query on the top level, wrapping everything else inside, which is however not the desired result for us:
// This is wrong!
@container (width >= 320px) {
.wrapper .Container .another-selector .Element {
...
}
}
Even if preprocessors do handle @container queries differently, they have no way of telling at which point the container selector begin and end.
Maybe the following is the closest to a solution:
.wrapper {
.Container {
...
@container (width >= 320px) {
.another-selector {
.Element {
}
}
}
}
}
Here preprocessors can assume that everything outside a @container query is the container selector, and needs to be put in between the query keyword and the conditions, and anything inside would be element / child selectors.
Resulting in:
// This is correct!
@container .wrapper .Container (width >= 320px) {
.another-selector .Element {
...
}
}