React类名命名规范

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

- MoYummy

Answer 1

TLDR: PascalCase 和 Block__Element--Modifier 查看 create-react-app 的官方文档doc，它提供了一个创建自定义组件的最小示例。文件名和 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" />;
  }
}

此外，该文档还提供了一个外部链接，该链接描述了组件内部元素的BEM命名约定(链接)。

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

- MoYummy

---

这并不完全正确。在文档中，CSS导入示例的类名为Pascal case，但模块的类名为camel case。因此，它应该是camelCase。而且，Airbnb是一份流行且成熟的样式指南，也建议将模块类设为camelCase。 - Abdul Rehman

Answer 2

一些命名规范（推荐）如下：

1. 组件名称

   组件名称应采用 PascalCase。

   例如， MyComponent，MyChildComponent 等。

---

2. 属性

   属性名称应采用 camelCase。

   例如， className，onClick 等。

---

3. 内联样式

   内联样式应采用 camelCase。

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

---

4. 变量名

   变量名可以采用 camelCase （好的实践），PascalCase （可避免），lowercase，也可以包含 number 和 special characters。

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

---

5. 类名

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

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

- ravibagul91

---

可以分享资料来源吗？ - Erdal G.

Answer 3

这完全取决于你（和你的团队）的喜好。React（也不是纯HTML）不会限制你使用小写、连字符或驼峰式的类名。

然而，我建议你选择一个现有的CSS约定，比如BEM。如果正确遵循，这将确保类名在整个过程中保持一致。

在我们的项目中，我们选择了一种自定义约定，将组件类名与组件名称匹配。

例如：

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

如您所见，这看起来很像BEM，只是块名采用帕斯卡命名法，元素使用单划线分隔符，块修饰符使用双划线分隔符。

- Chris