CSS Modules
It's wonderful that CSS problems have been distilled so clearly, it's been a long time coming.  Radium[1] is really worth checking out, it's simple and clear.From the article:  /* BEM */
  .normal { /* all styles for Normal */ }
  .button--disabled { /* overrides for Disabled */ }
  .button--error { /* overrides for Error */ }
  .button--in-progress { /* overrides for In Progress */

  /* CSS MODULES */
  .normal { /* all styles for Normal */ }
  .disabled { /* all styles for Disabled */ }
  .error { /* all styles for Error */ }
  .inProgress { /* all styles for In Progress */

  > In CSS Modules each class should have all the styles needed for that variant

This seems like trading one set of problems for another. It violates DRY and consequently impacts code maintainability. The corollary is that .disabled should @include .normal and then define the overrides so you only have to define the base styles once in .normal... but that also requires discipline and code wrangling.  > [BEM] requires an awful lot of cognitive effort around naming discipline.

But the proposed alternative is not too different either:  /* components/submit-button.css */
  .error { ... }
  .inProgress { ... }

This example just replaces BEM naming and namespacing with file naming and directory structure.[1]: https://github.com/FormidableLabs/radiumEDIT: On second reading, the stuff in there is definitely not "Welcome to the future" exploring the "adjacent possible" realm--those are quite grandoise pretexts to a solution that is just as unwieldy.