title: What are the pros and cons to styling each element with CSSModules versus using CSS child selectors?
body: <p>I'm using react and styling components with bootstrap-sass and css-modules. When I want to style something, what are the pros and cons for individually styling elements like</p>
  <pre><code>&lt;div className={styles.styleDiv}&gt;
    &lt;form className={styles.styleForm}&gt;
      &lt;input className={styles.styleInput&gt;&lt;/input&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.styleDiv {
    /* code */
  }
  
  .styleForm {
    /* code */
  }
  
  .styleInput {
    /* code */
  }
  </code></pre>
  <p>rather than child selectors like</p>
  <pre><code>&lt;div className={styles.styleDiv}&gt;
    &lt;form className={styles.styleForm}&gt;
      &lt;input&gt;&lt;/input&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.styleDiv {
    /* code */
  }
  
  .styleForm {
    /* code */
  
    &amp; &gt; input {
      /* code */
    }
  }
  </code></pre>
  <p>Is there a best-practice for how to use css modules?</p>