You can use StrCSS as well, it creates isolated classnames and much more! Example code would look like. You can (optional) install the VSCode extension from the Visual Studio Marketplace for syntax highlighting support!
source: strcss
import { Sheet } from "strcss";
import React, { Component } from "react";
const sheet = new Sheet(`
map button
color green
color red !ios
fontSize 16
on hover
opacity .5
at mobile
fontSize 10
`);
export class User extends Component {
render() {
return <div className={sheet.map.button}>
{"Look mom, I'm green!
Unless you're on iOS..."}
</div>;
}
}