title: CSS modules nested selectors
body: <p>I have the following convention for name spacing my app and components:</p>
  
  <pre><code>&lt;div id="app-name"&gt;
  
    &lt;ul class="list"&gt;
      &lt;li&gt;item&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>#app-name {
  
    .list {
      margin: 0;
    }
  
  }
  </code></pre>
  
  <p>I'd like to use CSS modules, however, I'm not sure how one would go about converting this and keep the same specificity of app and component name spacing. I understand I could simply omit the entire <code>#app-name</code> ID but I'd like this sort of specificity.</p>
  
  <p>Thoughts?</p>