title: Benefits of using CSS modules with React/Vue
body: <p>I would like to understand the benefits of using <strong>CSS Modules</strong> with <strong>React</strong>/<strong>Vue</strong>.</p>
  <p>Currently in my company developers use the following in development:</p>
  <pre><code>return (
      &lt;div className={styles.User}&gt;
          &lt;div className={styles.name}&gt;...&lt;/div&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>While using a <strong>CSS module</strong> file, something like:</p>
  <pre class="lang-scss prettyprint-override"><code>.User {
      background-color: var(--bg-color, red);
  
      .name { color: white; }
  }
  </code></pre>
  <p>What should an HTML output such as:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;_User_xyz_1&quot;&gt;
      &lt;div class=&quot;_name_abc_1&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Which is a bit confusing for me, as this &quot;<em>encodes</em>&quot; all the class names and creates a great deal of difficulty if I need to do a <strong>parent-level modification</strong>. Eg.:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;SomeParent&quot;&gt;
      &lt;User name=&quot;David&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>So:</p>
  <pre class="lang-css prettyprint-override"><code>.SomeParent {
      &gt; .User {
          --bg-color: blue; // Will not words, because .User is not .User, in fact.
      }
  }
  </code></pre>
  <p>In personal projects, I prefer to name the <strong>primary element</strong> of the template by defining it as a &quot;major class&quot;, the main. Eg.:</p>
  <pre><code>return (
      &lt;div className=&quot;User&quot;&gt;
          &lt;div className=&quot;name&quot;&gt;...&lt;/div&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>And a <strong>regular CSS/SCSS</strong>:</p>
  <pre class="lang-scss prettyprint-override"><code>.User {
      background-color: var(--bg-color, red);
  
      &gt; .name { color: white; }
  }
  </code></pre>
  <p>So a parent element's code can affect a child element under expected and controlled conditions.</p>
  <p><strong>My question here is:</strong> what are the <strong>benefits</strong> of using the model that my company uses that I am not able to see? Am I missing something using a more &quot;<em>moderate/primitive</em>&quot; model?</p>
  <p><strong>Another possibility is:</strong> can I modify the style of child elements through the parent element, even with the name of the classes being encoded this way?</p>