you still have to base it off either the parent (.signup-page .testimonial) or a conditional that's only used on a particular page (.testimonial.compact). The media queries are sub-optimal but it's contained within .testimonial. Here's how it can look:
.testimonial {
media screen and (max-width: 900px) {
font-size: 0.8em;
}
&.compact {
media screen and (max-width: 1200px) {
font-size: 0.8em;
}
}
}
What if this thing shows up in 18 places, some of those change sizes on mobile, some of them in turn being reused in several places and then somebody changes something that affects the size (and therefore desired styles) of some but not other of those contexts, and adds 6 more contexts in which the size matters?
I want to say "When displaying a user profile, If there's more than X units of horizontal space, use the large profile image. If there's more than Y units of vertical space show their bio, trimmed to length but avoiding widow sentences and followed by ellipsis. If there's very little room at all, just show their user name."
I know what I want and I can describe it simply and in a way that a machine could implement, but using today's tools it will take significant developer (human) effort (which typically isn't within my client's priorities and ultimately gets neglected).
By all means, I would love to have element queries. They would definitely help in many cases. You would have to limit their use to just those areas of markup where container widths are explicit.
If it shows up in 18 places I bet you there will be two different contexts with the same container size, but different looks, and element queries won't help you at this point. You'll still need to tailor your CSS classes for different contexts.
Obviously if I want styles to vary by context of their container, I'll need to create those rules. The desire for and utility of being able to do that is not at all in question. I don't see how having such rules is in any way mutually exclusive with element queries.
