Benefits of using CSS modules with React/Vue

Question

I would like to understand the benefits of using CSS Modules with React/Vue.

Currently in my company developers use the following in development:

return (
    <div className={styles.User}>
        <div className={styles.name}>...</div>
    </div>
)

While using a CSS module file, something like:

.User {
    background-color: var(--bg-color, red);

    .name { color: white; }
}

What should an HTML output such as:

<div class="_User_xyz_1">
    <div class="_name_abc_1">...</div>
</div>

Which is a bit confusing for me, as this "encodes" all the class names and creates a great deal of difficulty if I need to do a parent-level modification. Eg.:

<div class="SomeParent">
    <User name="David" />
</div>

So:

.SomeParent {
    > .User {
        --bg-color: blue; // Will not words, because .User is not .User, in fact.
    }
}

In personal projects, I prefer to name the primary element of the template by defining it as a "major class", the main. Eg.:

return (
    <div className="User">
        <div className="name">...</div>
    </div>
)

And a regular CSS/SCSS:

.User {
    background-color: var(--bg-color, red);

    > .name { color: white; }
}

So a parent element's code can affect a child element under expected and controlled conditions.

My question here is: what are the benefits of using the model that my company uses that I am not able to see? Am I missing something using a more "moderate/primitive" model?

Another possibility is: can I modify the style of child elements through the parent element, even with the name of the classes being encoded this way?

Answer 1

CSS modules generate custom classnames for each style and therefore prevent the problem you are facing in your solution. Because each css module style has its own classname you cannot accidentially change a child components style.

Answer 2

hash className, preventing other developers from quickly decompiling your style scheme.