Question

我们知道，我们应该在原始html中将css类名使用小写和破折号（例如<div class="lower-case-dash" />）。在React JSX中呢？

对于html元素和其他React组件，css类名的命名约定是什么？骆驼还是破折号？

<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

这完全取决于您（和您的团队）的偏好。 React（也不是纯HTML）不会限制您使用较低的，破折号或驼峰式的类名。

但是，我建议您选择现有的CSS约定，例如BEM。这样可以确保在整个过程中类名保持一致（如果正确遵循的话）。

我们在项目中选择了自定义约定，以使组件类名称与组件名称相匹配。

示例：

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

如您所见，这看起来与BEM非常相似，除了pascal大小写的块，用于元素的单破折号分隔符和用于块修饰符的双破折号分隔符。

Answer 2

一些命名约定（推荐）为：

组件名称

组件名称应位于PascalCase中。

例如 MyComponent，MyChildComponent等

属性

属性名称应为camelCase。

例如 className，onClick等

内嵌样式

内联样式应为camelCase。

例如 <div style={{color:'blue',backgroundColor:'black',border: '1px solid',borderRadius:'4px'}}>My Text</div>等

变量名

变量名称可以是camelCase（优良作法），PascalCase（避免），lowercase，也可以包含number和special caracters。

例如 state = {variable:true, Variable:true, variableName:true}等

类名

类名可以是camelCase，PascalCase，lowercase，也可以包含number和special caracters，因为毕竟它是字符串。

例如 className="myClass MyClass My_Class my-class"等。

Answer 3

TLDR：PascalCase和Block__Element--Modifier

查看create-react-app中的官方doc。它提供了创建自定义组件的最小示例。 js和css文件名以及className都紧随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" />;
  }
}

此外，该文档还提供了外部link，它描述了组件内部元素的BEM命名约定（link）。

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

React className命名约定

3 个答案: