I am curious about the advantages of incorporating CSS Modules into projects with React/Vue.
At my workplace, developers currently utilize the following approach during development:
return (
<div className={styles.User}>
<div className={styles.name}>...</div>
</div>
)
Instead of using a traditional CSS file, they opt for a CSS module like this:
.User {
background-color: var(--bg-color, red);
.name { color: white; }
}
This method results in HTML output similar to:
<div class="_User_xyz_1">
<div class="_name_abc_1">...</div>
</div>
Although it seems complex, as it "encodes" all class names and makes parent-level modifications challenging. For instance:
<div class="SomeParent">
<User name="David" />
</div>
In personal projects, I prefer naming the primary element as a major class, such as:
return (
<div className="User">
<div className="name">...</div>
</div>
)
Using regular CSS/SCSS:
.User {
background-color: var(--bg-color, red);
> .name { color: white; }
}
This allows for parent elements to affect child elements under controlled conditions.
My question is: What benefits does my company's model offer that I may not be considering? Am I missing out on something by sticking to a more simplistic approach?
Another consideration: Can I still manipulate the style of child elements through the parent element, even with the encoded class names?