CSSModules知识点总结持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章git版本控制工具知识点总结（五）中，我们学习了git版本控制工具中git校验和、如何查看提交的历史、版本回退、远程仓库等相关知识点。今天，在这篇文章中，我们将学习CSSModules的知识点，包括CSSModules介绍、CSSModules使用、CSSModules规则、CSSModules配合SASS使用等相关知识点。

CSSModules介绍

CSS Modules 即CSS 模块，可以理解为对 CSS 进行模块化处理。使用CSS Modules的目的在于在 React 开发时，解决组件之间类名重复导致的样式冲突问题。在使用CSS Modules前，自己手动为每个组件起一个唯一的类名。使用CSS Modules后，自动生成类名，即使将来多人合作开发项目，也不会导致类名冲突。

React 脚手架中为 CSSModules 自动生成的类名格式为：[filename]_[classname]__[hash]。

filename：文件名称
classname：自己在 CSS 文件中写的类名
hash：随机生成的哈希值

/* GeekLayout 组件的 css 文件中：*/
.header {}

/* React 项目中，CSS Modules 处理后生成的类名：*/
.GeekLayout_header__adb4t {}

CSSModules使用

CSS 文件名称以 .module.css 结尾的，此时，React 就会将其当做 CSSModules 来处理，比如，index.module.scss。如果不想使用 CSSModules 的功能，只需要让样式文件名称中不带.module 即可，比如，index.css。

CSSModules使用步骤：

创建样式文件，名称格式为：index.module.scss。
在 index.module.scss 文件中，按照原来的方式写 CSS 即可。
在 JS 中通过 import styles from './index.module.scss' 来导入样式文件。
在 JSX 结构中，通过 className={styles.类名} 形式来使用样式（此处的类名就是 CSS 中写的类名）。

// Login/index.module.css
.a {
  color: red;
}

// Login/index.js
import styles from './index.module.css'

// 对象中的属性 a 就是：我们自己写的类名
//      属性的值 就是：React 脚手架帮我们自动生成的一个类名，这个类名是随机生成的，所以，是全局唯一的！！！
// styles => { a: "Login_a__2O2Gg" }

const Login = () => {
  return (
    <div>
      <span className={styles.a}>Login</span>
    </div>
  )
}

export default Login

CSSModules规则

使用 CSSModules 时，建议遵循以下 2 个规则：

CSSModules 类名推荐使用驼峰命名法，这有利于在组件的 JS 代码中访问。

/* index.mdouel.css */

/* 推荐使用 驼峰命名法 */
.a {
  color: red;
}
.listItem {
  font-size: 30px;
}

/* 不推荐使用 短横线（-）链接的形式 */
.list-item {
  font-size: 30px;
}

import styles from './index.module.css'

// 推荐：这样用起来更加访问
<p className={styles.listItem}></p>

// 不推荐这种：写起来太繁琐了
// <p className={styles.list-item}></p> // 错误的使用方式
<p className={styles['list-item']}>不推荐</p>

不推荐嵌套样式 对于 CSS 来说，嵌套样式，很重要的一个目的就是提升 CSS 样式权重，避免样式冲突。但是，CSSModules 生成的类名是全局唯一的，就不存在权重不够或者类名重复导致的样式冲突问题。

CSSModules全局样式

在 *.module.css 文件中，类名都是“局部的”，也就是只在当前组件内生效。有些特殊情况下，如果不想要让某个类名是局部的，就需要通过 :global() 来处理，处理后，这个类名就变为全局的了。从代码上来看，全局的类名是不会被 CSSModules 处理的。

/* 该类型会被 CSSModules 处理 */
.title {
  color: yellowgreen;
}

/* 如果这个类名，不需要进行 CSSModules 处理，可以通过添加 :global() 来包裹 */
:global(.title) {
  color: yellowgreen;
}

CSSModules配合SASS使用

推荐以下方式来将 CSSModules 配合 SASS 使用：

每个组件的根节点使用 CSSModules 形式的类名（根元素的类名： root ）
其他所有的子节点，都使用普通的 CSS 类名

这样处理的优势：解决组件间样式冲突问题的同时，让给组件添加样式尽量简单。

.root {
  // 根节点自己的样式
  
  :global {
    // 所有子节点的样式，都放在此处，因为是在 global 中，所以，此处的类名不会被 CSSModules 处理
    .header {}
    .logo {}
    .user-info {}
  }
}

组件中使用 CSSModules：

import styles from './index.module.scss'

const GeekLayout = () => {
  return (
  	<div className={styles.root}>
      <Header className="header">
        <div className="logo" />
        <div className="user-info"></div>
      </Header>
    </div>
  )
}