CODEWITHSUNDEEP
javascriptcsscss-in-js
Anders Clark
Anders Clark

Reputation: 75

Which casing should I use for CSS classes when using CSS-in-JS?

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;
}

Upvotes: 4

Views: 5032

Answers (5)

burakarslan
burakarslan

Reputation: 334

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.

Upvotes: 0

N0tSp4m
N0tSp4m

Reputation: 39

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.

Upvotes: 1

Bharat
Bharat

Reputation: 1205

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.

Upvotes: 2

Dexterians
Dexterians

Reputation: 1021

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}).

Upvotes: 2

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

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

Upvotes: 1

Related Questions