title: CSS Modules - referencing classes from other modules
body: <p>I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.</p>
  
  <p>Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.</p>
  
  <p>Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.</p>
  
  <p>Here's the problem:
  In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.</p>
  
  <p>Example in SASS:</p>
  
  <p>[page.scss]</p>
  
  <pre><code>.wrapper {
      margin: 0;
  }
  </code></pre>
  
  <p>[headline.scss]</p>
  
  <pre><code>.headline {
      color: green;
  }
  .wrapper {
      .headline {
          color: orange;
      }
  }
  </code></pre>
  
  <p>As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".</p>
  
  <p>Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...</p>