Globals make it impossible to reason about separate components in isolation. What classname can I use for this button? Can I use '.button'? What if someone else already uses '.button'? Who knows...
e.g.
my-namespace {
.button {
color: red;
}
.another-button {
color: blue;
}
}
The problem with this approach is that you need to declare the namespace in DOM somehow, and depending on the project that can either be easy or rather difficult. I used this technique when I ported a stand-alone application with classes just like ".button" to be a single page in a larger application, and it worked fine.
Anyway, I do think that CSS should have a proper solution to modularization.
EDIT: Now that I could open the link (it didn't open for me previously), I now see that this approach doesn't solve the problem with the article, since it doesn't support nested namespaces. (Although a hacky solution would be a 'reset all rules' helper in the inner namespace).
As for your example not working with the approach, that's one of the problems as I see it with these solutions. The fancy, complicated approach apparently doesn't support one of the basics of CSS which would go a long way to fixing the problem as they see it.
I prefer to have a button class, for example in react that when instanced renders all the time the same. It boundles it's css within, just like this lib.
http://lesscss.org/features/#features-overview-feature-names...
I haven't personally used it, though.
Another solution would be have a "button.less" like this:
comp-a, comp-b, comp-c {
.button {
}
}