3

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;
}
Anders Clark
  • 33
  • 7

5 Answers5

2

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

Dexterians
  • 1,011
  • 1
  • 5
  • 12
2

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.

Bharat
  • 1,192
  • 7
  • 14
  • While I appreciate where you're coming from, I do think that in the case of frontend development, language-specific conventions are relevant. Which other language would you be using to handle CSS in the browser? – Anders Clark Jul 20 '21 at 08:12
  • 1
    Of course css would be used only for frontend, the point I was trying to make is when you use them directly in HTML. If you look at most of the style names also follow the hyphen to sperate word, For Example. font-weight. The challenge that I face to follow myButton kind of styling is, all the styles that we would use would follow my-Button and programmers have to remember which styles are our own over the ones that are coming from standard reusable component such as bootstap – Bharat Jul 20 '21 at 08:32
1

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.

N0tSp4m
  • 39
  • 4
0

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

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
0

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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
burakarslan
  • 245
  • 2
  • 11
  • The article gives no good reason not to use camelCasing for class names over kebab casing. Instead it operates with an opinionated statement: "This is a pretty standard CSS naming convention. It is arguably more readable." And sprinkles it with the "Also, it is consistent with the CSS property names.". Where is it stated that the CSS classes must be consistent with the property names? I too can state my opinion that .textContainer__subHeader--blue is more readable than kebab version of it. It does not make it a rule though. – avepr Aug 29 '22 at 10:02