After starting to use css modules in my react project, I quickly realized the struggle of changing classnames to fit the requirements of css modules.
For example, if we have a component using regular css:
import React from 'react'
import "./styles.css";
const About = () => {
return (
<div>
<h1 class="title">CSS Modules</h1>
<span class="select2-selection select2-selection--single dropdown-container" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-static-cooldown-container">
<span class="select2-selection__rendered" id="select2-static-cooldown-container" role="textbox" aria-readonly="true" title="1 hour">
<span>
<div class="icon icon-time-2"></div> 1 hour
</span>
</span>
</span>
</div>
);
};
export default Dashboard;
But when working with css modules, the class names require modification:
import React from 'react'
import styles from "./styles.module.css";
const About = () => {
return (
<div>
<h1 class={styles.title}>CSS Modules</h1>
<span class="select2-selection select2-selection--single dropdown-container" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-static-cooldown-container">
<span class="select2-selection__rendered" id="select2-static-cooldown-container" role="textbox" aria-readonly="true" title="1 hour">
<span>
<div class="icon icon-time-2"></div> 1 hour
</span>
</span>
</span>
</div>
);
};
export default Dashboard;
Why is this necessary?
Aside from changing class names, what about other css elements or attributes like id? Moreover, what about components with multiple classes in their name? Do all those need modifications too?
Is there a way to utilize css modules without having to alter class names?
Although I haven't found a definite answer yet, it seems most people continue modifying class names despite the mess. However, part of me believes there must be a more efficient solution because this process is rather cumbersome