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:
Component Name
Component name should be in
PascalCase
.For example,
MyComponent
,MyChildComponent
etc.
Attributes
Attribute name's should be
camelCase
.For example,
className
,onClick
etc.
Inline styles
Inline styles should be
camelCase
.For example,
<div style={{color: 'blue', backgroundColor: 'black', border: '1px solid', borderRadius:'4px'}}>My Text</div>
etc.
Variable Names
Variable names can be
camelCase
(Good practice),PascalCase
(Avoidable),lowercase
, can also containnumber
andspecial characters
.For example,
state = {variable:true, Variable:true, variableName:true}
etc.
Class Name
Class names can be anything
camelCase
,PascalCase
,lowercase
, can also containnumber
andspecial characters
, because after all it is a string.For example,
className="myClass MyClass My_Class my-class"
etc.