You're gonna infuriate lots of CSS people! That's the basis of modularity: you can just move around a component anywhere on the page, it will keep its styling (thanks to classes like header--large) and not be disturbed by its surroundings.
Personally, I agree with you, and think it's a bad approach. Elements should be able to be styled according to context.
Let's say I have 2 columns: "main" and "sidebar". I have a list of my latest articles in "main". I want to show another list of articles in my "sidebar", but display them smaller, because it's secondary content.
Why should I have to add the ".post--small" class to all my posts? Why can't I use the context of the parent ".sidebar" and use that in my CSS? I could then keep the exact markup for all posts across the website.
"Ideal situation, parent container media queries"
Yes, that's exactly what CSS is missing, but you found the reason why it hasn't been implemented: circular dependency issues.
There's too many negotiation between containers because a child component doesn't understand where it is, components are very "dumb" right now. We need smart context sensitive components.
In your example the articles would have a standard styling and the main/sidebar would alter the styling as needed.
Tangentially related. It bothers me a lot that we have to add classes like header--large onto a component. The classname header--large should be able to automatically switch depending on it's parent containers size (and not the window size like media queries work). My component may be presented it 3 different styles depending on the size constraints of it's container and hard-coding --large into the classname just makes it a hack. It's not large on mobile so why am I overriding the styles of my desktop header--large classname.
Ideal situation, parent container media queries so that variations can be kept solely in css and you could just drop a component into anywhere. I'm guessing there are some circular dependency issues stopping this from working maybe?