React className naming convention

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

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 characters.

   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 characters, because after all it is a string.

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