I've read that the CSS-spec does not specify case-sensitivity, which has led to some browsers treating, for example, .myheader as equal to .myHeader . But since the standard in Javascript is to write variables in camelcase, how do I reconcile these two when using CSS-in-JS?

My React code could look like this:

import style from './style.module.css'
//...
<Button className={style.myButton} />

And the CSS would then break casing-convention:

.myButton {
    background-color: blue;
}

OR my React code could look like this (which is kinda ugly):

import style from './style.module.css'
//...
<Button className={style['my-button']} />

And the CSS would then follow the kebab-case convention:

.my-button {
    background-color: blue;
}

I've read that the CSS-spec does not specify case-sensitivity, which has led to some browsers treating, for example, .myheader as equal to .myHeader . But since the standard in Javascript is to write variables in camelcase, how do I reconcile these two when using CSS-in-JS?

My React code could look like this:

import style from './style.module.css'
//...
<Button className={style.myButton} />

And the CSS would then break casing-convention:

.myButton {
    background-color: blue;
}

OR my React code could look like this (which is kinda ugly):

import style from './style.module.css'
//...
<Button className={style['my-button']} />

And the CSS would then follow the kebab-case convention:

.my-button {
    background-color: blue;
}

• javascript
• css
• css-in-js

5 Answers 5

Ultimately it is up to you. If you are the only person who will be working on the project it doesn't matter. If you are working with a team, discuss with them their preference.

Personally, I've used all forms across my projects. It just depended on what looked right or felt right with the code I was working with, like in your case where you've mentioned kebab-case looks a bit ugly in amongst your React code.

Best practice would suggest kebab-case; but yeah, you don't have to, however, kebab-case may not work so well in the instance of modules/objects (className={style.like-this-example}).

While agree with @Dexterians, its a choice that as team we should make. However, I would give preference to naming conventions over it's usage in a specific language. To me I would choose class name my-button over myButton and then usage style['my-button']

This way we stay consistent on names irrespective of language constraint.

In React first one always works in case of modules, so you do not need to worry about it. So, going with the below convention works fine.

React:

import style from './style.module.css'
//...
<Button className={style.myButton} />

CSS

.myButton {
    background-color: blue;
}

Refer to this Medium link for more insight: CSS in JS

Wut? CSS is not case sensitive?

I think you need to read.

Are class names in CSS selectors case sensitive?

Are CSS selectors case-sensitive?

You've kind of contradicted yourself @Anders - while you're trying to follow conventions - you're doing as @Dexterians and @Bharat have said, doing your own thing that suits your needs :P

What is "convention" to one developer may not neccessaily be "convention" to another. Alas why you need to work with your team.

kebab-case is preferred and suggested by people for casing CSS classes. You can read here why it should be used

You can use it in react like this :

style['my-button']

I know you said it is ugly. But it is the only way.