样式私有化方案

React 中样式私有化的方案有以下几种：

1. CSS Modules：使用 CSS Modules 可以让样式表中的类名只在当前组件内部可用，从而避免了 className 冲突的问题。CSS Modules 能够自动为类名添加哈希值，使得类名具有唯一性。

2. CSS in JS：通过使用一些 CSS in JS 的库，如 styled-components、emotion 等，可以将组件的样式直接写入组件代码中，从而避免类名冲突的问题。

3. BEM 命名规范：BEM 是一种命名规范，其通过为类名添加前缀的方式，达到防止类名冲突的效果。

需要注意的是，CSS Modules 和 CSS in JS 都是比较新的技术，需要在开发中谨慎使用。BEM 命名规范是一种比较传统的做法，在实践中比较可靠，但也存在一些缺陷，例如类名冗长等。在选择样式私有化的方案时，需要综合考虑项目的实际情况和团队的开发经验。

---

以下是每种方案的例子：

1. CSS Modules：

首先，在 React 项目中安装 CSS Modules：

npm install --save-dev css-loader

接着，在需要使用 CSS Modules 的组件模块中，加入以下代码：

import React from 'react';
import styles from './MyComponent.module.css'; // CSS Modules 样式表

function MyComponent(props) {
  // 使用 CSS Modules 样式表中定义的类名
  return <div className={styles.myClass}>Hello, world!</div>;
}

export default MyComponent;

这里通过 import styles 引入了 CSS Modules 样式表，并使用 styles.myClass 来引用其中的类名。Webpack 会将 CSS Modules 样式表中的类名替换成带有哈希值的唯一类名，从而防止类名冲突。

2. CSS in JS：

在 React 中，为了避免 CSS 样式冲突并提高可复用性，我们通常会对样式进行“私有化”处理，即为每个组件的样式添加唯一的前缀。有多种方式可以实现样式私有化，其中一种比较常用的方式是利用第三方库 styled-components。

styled-components 是一种 CSS-in-JS 解决方案，它可以让我们通过编写 JavaScript 代码来创建和管理组件的样式，同时还支持样式私有化的功能。具体使用方法如下：

• 首先，通过 npm 安装 styled-components。

npm install styled-components

• 接着，在需要使用样式的组件中引入 styled-components。

import styled from 'styled-components';

• 然后，在组件中定义样式，使用 styled.标签名 的语法定义组件样式。在样式中可以使用普通的 CSS 属性，也可以使用 JavaScript 变量和表达式。

const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 4px;
`;

在上面的例子中，我们通过 styled.button 语法定义了一个名为 Button 的组件，并定义了组件的样式。这个样式是普通的 CSS 样式，包括了背景色、字体颜色、字体大小、内边距和边框样式等。

• 最后，在组件中使用定义好的样式。

function MyComponent() {
  return <Button>Click me!</Button>;
}

在上面的例子中，我们通过 标签使用了定义好的名为 Button 的样式。由于 styled-components 会自动为每个组件生成唯一前缀的类名，因此这个组件的样式也是私有化的。

styled-components 还有其他一些高级的功能，例如支持动态样式、主题和模板方法等。如果需要了解更多 styled-components 的使用方法，可以查阅其官方文档。‘

’

3. BEM 命名规范：

BEM 命名规范建议为每个组件定义一个类名，并使用双下划线“__”和双短划线“–”分别表示元素和修饰符。例如：

/* 组件的类名 */
.my-component { }

/* 组件中的元素 */
.my-component__title { }

/* 组件中的修饰符 */
.my-component--large { }

在组件中，使用类名时也需要遵循 BEM 规范：

import React from 'react';
import './MyComponent.css'; // BEM 样式表

function MyComponent(props) {
  // 使用 BEM 样式表中定义的类名
  return (
    <div className="my-component">
      <h2 className="my-component__title">Hello, world!</h2>
    </div>
  );
}

export default MyComponent;

这个例子中，我们通过 import './MyComponent.css' 引入了 BEM 样式表，并使用 my-component__title 类名来设置标题的样式。

4.内联式

---

CSS Modules的原理

当 Webpack 编译器解析模块时，如果遇到了 CSS 应用程序或模块，则需要通过某种方式处理这些样式，以便它们成为最终构建的一部分。

一个常见的方法是使用 css-loader 和 style-loader。 css-loader 解析 CSS 文件，类似于其他 webpack 加载器，例如 url-loader 和 file-loader，因为它可以将代码转换为 JavaScript 对象。 style-loader 将样式添加到 DOM，从而确保在应用程序中显示样式。

以 CSS Modules 的形式使用 css-loader 和 style-loader，css-loader 负责处理样式表，并使用唯一的类名代替类名，避免直接暴露类名。 style-loader 则在运行时将生成的 CSS 插入到 DOM 中。

当使用 CSS Modules 时，每个 CSS 类都必须具有一个全局唯一的名称。通过以下技术，webpack css-loader 可以确保每个生成的类的唯一性：

1. 通过在启用时在 css-loader 上设置 modules 选项，并使用 :local(.) 指定使用 CSS Modules。
2. 在 CSS 样式表中，类名的修改：将 .className 修改为 :local(.className)。
3. 例如，通过样式表 module.css：

.class1 {
  color: red;
}

.class2 {
  background: yellow;
}

使用 :local() 可以修改如下：

:local(.class1) {
  color: red;
}

:local(.class2) {
  background: yellow;
}

在原始代码编译之后，可以看到, 类名已修改，而且每个类名都具有全局唯一的哈希值：

{
  "class1": "src-module__class1__2MaZ0",
  "class2": "src-module__class2___10rSW"
}

最终，style-loader 负责将 CSS 添加到 DOM 中。在使用 :local() 之后，所有类名都变得唯一，因此它们不会干扰应用程序中的任何其他类，并且它们始终具有正确的组件范围。

---

各种命名方式都有其优点和缺点

1. 标准 CSS

优点：标准 CSS 简单易用，可以随时学习使用。

缺点：类名难以管理，项目变大之后，难以避免类名冲突。而且样式的命名可能不足具有表现力。

2. CSS Modules

优点：类名全局唯一，避免类名冲突。样式表代码与组件代码绑定在一起，比较易于维护和管理。它们还可以提供一些私有功能，确保不会影响全局样式。

缺点：它需要配置 Webpack，并且可能破坏一些 CSS 实用程序库。由于生成的类名是完全不可预测的，因此比较难以在浏览器审查工具中进行调试。

3. CSS in JS

优点：将样式集成到组件中，并且可以在运行时动态创建和管理样式。因此，可以避免类名问题，并且具有更好的动态控制能力。

缺点：它需要学习新的语法和库，并可能增加学习成本。还需要确保 CSS-in-JS 库和组件库兼容。

4. BEM

优点：通过分层的元素和修饰符命名规范，可以轻松编写出可维护的 CSS 代码，并避免类名冲突。

缺点：容易产生类名冗余，因为类名的组合可能比标准 CSS 更加冗长。同时，BEM 可能不容易被初学者理解和学习。

总的来说，每种命名方式都有其适用的场景。对于小型项目，使用标准 CSS 可行，但是在大型项目中，应尽量避免类名冲突。CSS Modules、CSS in JS 和 BEM 命名规范中，可以根据个人偏好和项目需求进行选择。