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.


  1. Attributes

    Attribute name's should be camelCase.

    For example, className, onClick etc.


  1. Inline styles

    Inline styles should be camelCase.

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


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


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