I’ve been following a similar approach too and it’s taken away a lot of pain.
Generally speaking my CSS Components are self contained, full width etc. i.e. any rule that might affect composability (margin, width, float, postition …) is left out on purpose or rather reset so that components can fit any context.
Layout is done with HoC or utility classes which, like you, said are the only way to stay sane “when Design asks for an offset of 10 pixels on the story page but an offset of 20 pixels on the home page”.
I wrote about this on my blog.
Cascade is just one part of the problem though, inheritance plays a big role too mostly because in many cases it is unpredictable.
Don’t get me wrong inheritance is awesome if you use it wisely but, because of its unpredictability, inheritance can be harmful – this is a problem that ShadowDOM tries to fix.
Recently I’ve been experimenting with the idea of resetting inherited properties for
Blocks (in SuitCSS we call them
Components) so that inheritance becomes predictable and opt-in only i.e. you’d have to explicitly set
Descendants) would still inherit from the
Block *scope* instead.