CODEWITHSUNDEEP
reactjsnaming-conventions
MoYummy
MoYummy

Reputation: 839

React className naming convention

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" />

Upvotes: 27

Views: 39199

Answers (3)

ravibagul91
ravibagul91

Reputation: 20755

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.

Upvotes: 16

MoYummy
MoYummy

Reputation: 839

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

Upvotes: 32

Chris
Chris

Reputation: 6621

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.

Upvotes: 4

Related Questions