[lightblade]

We use a combination of Atomics and BEM in our project.

Atomics offers single level specificity thus providing a strategy to combat the specificity problem that plagues many projects.

They are single purpose and infinitely composable, which complements very well with component oriented architecture that's popular today.

They are localized to single DOM node. When combined with its single purpose nature offers fewer surprises when making changes to your style sheet. For example, when you add a margin 15 Atomics to a DOM node, it is very hard to accidentally add another margin 15 somewhere else. Versus if you add a label class, it is much easier to accidentally add another label class and cause unintended consequences.

[colbyh]

this, pretty much. it's as declarative and surprise-free as you can get in CSS and it works super well when abstracted into components.

I know it isn't the easiest to read and it seems counterintuitive at first, but in practice you can easily encapsulate long chains of inline classes into helper classes thus giving most projects a sort of sane middle ground.