Kinda new to the whole html/js/css/react world... So, let's say I have a react component that generates a div that I want to style, so I set

<div className={"my-class-name"}>
{// stuff here
}
</div>

Then in a .css file:

.my-class-name{
    color : blue
}

Here "my-class-name" is a string literal, and string literals are bad-coding-101 in every language I've ever used, instead what to do is declare a constant once:

const MY_CLASS_NAME = "my-class-name"

and refer to the constant everywhere instead of the literal. For lots of reasons (you can change it in one place, you get compile-time not run-time errors, the IDE can know about it, etc.). But it doesn't seem like a css file can look up a javascript constant. Is there a way to do what I want? Am I thinking about this all wrong?

I tried googling, couldn't figure it out, any help is appreciated.