React className naming convention

Question

As we know, we are supposed to use lowercase and dash for css class name in raw html (e.g. <div class="lower-case-dash" />). What about in React JSX?

For html elements and other React components, what is the naming convention for css class name? camelcase or dash?

<div className="divClass">Something</div>
<div className="DivClass">Something</div>
<div className="div-class">Something</div>
<SomeComponent className="SomeComponent" />
<SomeComponent className="some-component" />

Answer 1

TLDR: PascalCase and Block__Element--Modifier

Check out the official doc of create-react-app. It provides a minimum example of creating a custom component. The js and css filenames as well as the className are all following PascalCase.

// Button.css
.Button {
  padding: 20px;
}

// Button.js
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

Besides, the doc also provides an external link, which describes BEM naming conventions (link) for elements inside the component.

// MyComponent.js
require('./MyComponent.less');
import { Component } from 'react';
export default class MyComponent extends Component {
  render() {
    return (
      <div className="MyComponent">
        <div className="MyComponent__Icon">Icon</div>
        ...
      </div>
    );
  }
}

// MyComponent.less
.MyComponent__Icon {
  background-image: url('icon.svg');
  background-position: 0 50%;
  background-size: fit;
  height: 50px;
}

Answer 2

Some of the naming conventions (Recommended) are:

1. Component Name

   Component name should be in PascalCase.

   For example, MyComponent, MyChildComponent etc.

---

2. Attributes

   Attribute name's should be camelCase.

   For example, className, onClick etc.

---

3. Inline styles

   Inline styles should be camelCase.

   For example, <div style={{color:'blue',backgroundColor:'black',border: '1px solid',borderRadius:'4px'}}>My Text</div> etc.

---

4. Variable Names

   Variable names can be camelCase (Good practice), PascalCase (Avoidable), lowercase, can also contain number and special caracters.

   For example, state = {variable:true, Variable:true, variableName:true} etc.

---

5. Class Name

   Class names can be anything camelCase, PascalCase, lowercase, can also contain number and special caracters, because after all it is a string.

   For example, className="myClass MyClass My_Class my-class" etc.

Answer 3

That totally depends on your (and your team's) preference. React (nor plain HTML) doesn't restrict you from using lower, dashed or camel-cased class names.

However, I would recommend that you choose an existing CSS convention like BEM. This will make sure that class names stay consistent throughout the process (if followed correctly).

We've chosen for a custom convention in our projects to match our components class names with the component name.

Example:

const NavBar = () => (
  <header className="NavBar NavBar--fixed">
    <div className="NavBar-brand"></div>
  </header>
);

As you can see, this looks a lot like BEM, except for the pascal-cased block, single dash separator for elements and a double dash separator for block modifiers.