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.<p>From the article:<p><pre><code>  /* 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
</code></pre>
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.<p><pre><code>  > [BEM] requires an awful lot of cognitive effort around naming discipline.
</code></pre>
But the proposed alternative is not too different either:<p><pre><code>  /* components/submit-button.css */
  .error { ... }
  .inProgress { ... }
</code></pre>
This example just replaces BEM naming and namespacing with file naming and directory structure.<p>[1]: <a href="https://github.com/FormidableLabs/radium" rel="nofollow">https://github.com/FormidableLabs/radium</a><p>EDIT: 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.