The RICG has a new fight: CSS container queries. The article's ignited discussion, beneficially. The problem is legitimate, the reasoning well argued and the solution intriguing. But something's niggling me. Element queries won't work for the various reasons given, but they're also ugly.

Which got me thinking. Why not scope the query to the property, not the element? Why write:

.mod:media( min-width: 40em ){
    align: left;
}

.mod {
    align: right;
}

When you could write:

.mod {
    align::media( min-width: 40em ): left;
    align: right;
}

Still ugly, sure, but I'd rather have repetition in my attributes than in my elements. It's a more orderly ugly.

TBC: I'm aware RICG have taken another direction; just a brain worm I needed to squash.