什么是CSS模块，我们为什么需要它们？

我最近对CSS模块很感兴趣。如果你还没有听说过，这篇文章是给你的。我们将关注该项目及其目标和目的。如果你感兴趣，请继续关注，因为下一篇文章将介绍如何开始使用这个想法。如果您希望实现或提高使用率，第3部分将介绍在React环境中使用它们。

文章系列：

1. 什么是CSS模块，我们为什么需要它们？（你在这里！）

2. CSS模块入门

3. React+CSS模块=

什么是CSS模块？

根据回购协议，CSS模块包括：
默认情况下，所有类名和动画名称的作用域都在本地的CSS文件。

因此，CSS模块不是官方规范或浏览器中的实现，而是构建步骤中的一个过程（在Webpack或Browserify的帮助下），该过程将更改类名和选择器的作用域（即有点像命名空间）。

这看起来像什么？为什么？我们将在稍后介绍。首先，请记住HTML和CSS通常是如何工作的。类应用于HTML：

An example heading

该类采用CSS样式：

.title {
  background-color: red;
}

只要CSS应用于HTML文档，＜h1＞的背景将是红色的。我们不需要处理CSS或HTML。浏览器可以理解这两种文件格式。

CSS模块采用不同的方法。我们需要在JavaScript文件中编写所有标记，而不是编写纯HTML，比如index.js。下面是一个如何工作的示例（稍后我们将查看一个更现实的示例）：

import styles from "./styles.css";

element.innerHTML = 
  `

     An example heading
   
`;

在我们的构建步骤中，编译器将搜索这些样式。css文件，然后查看我们编写的JavaScript，并通过styles.title访问.title类。然后，我们的构建步骤将把这两个东西处理成新的、单独的HTML和CSS文件，用一个新的字符串替换HTML类和CSS选择器类。

我们生成的HTML可能如下所示：

  An example heading

我们生成的CSS可能如下所示：

._styles__title_309571057 {
  background-color: red;
}

image.png

class属性和selector.title完全消失，取而代之的是这个全新的字符串；我们的原始CSS根本没有提供给浏览器。
正如Kitty Giraudel在关于该主题的教程中所说：
[类]是动态生成的、唯一的，并映射到正确的样式。
这就是样式作用域的含义。它们的作用域是特定的模板。如果我们有按钮。css文件，我们只能将其导入到按钮中。js模板和其中的.btn类对于其他模板（例如forms.js）是不可访问的，除非我们也将其专门导入到那里。
为什么我们要用CSS和HTML来做这件事？我们到底为什么要这样做？
为什么要使用CSS模块？

使用CSS模块，可以保证单个组件的所有样式：
住在一个地方
仅适用于该组件，不适用于其他组件
此外，任何组件都可以具有真正的依赖关系，例如：

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `
`;

此方法旨在解决CSS中的全局范围问题。

• 你是否曾因为缺乏时间或资源而试图尽可能快地编写CSS，而不考虑你可能会影响到什么？
• 您是否曾在样式表的底部随意添加一些垃圾，打算组织它，但从未这样做过？
• 你有没有遇到过你不完全确定它们做了什么或者它们是否被使用的风格？
• 你有没有想过，如果你能在不破坏一些东西的情况下摆脱一些风格？想知道这些风格是独立的还是依赖于其他东西？或者在其他地方重写样式？

这些问题可能会导致严重的头痛、项目期限过长以及窗外的悲伤和渴望。

使用CSS模块和默认的本地范围概念，可以避免这个问题。你总是被迫在写作风格时考虑后果。

例如，如果在HTML中使用随机的gross类，而不将其作为CSS模块样式类应用，则不会应用该样式，因为CSS选择器将转换为.style_random-gross-class_0038089。

compose关键字

假设我们有一个名为type的模块。css用于我们的文本样式。在该文件中，我们可能有以下内容：

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

我们将在模板中声明其中一个类，如下所示：

import type from "./type.css";

element.innerHTML = 
  `

    This is a heading
  
`;

这将导致如下标记：

  Heading title

这两个类都通过使用composite关键字绑定到元素，从而避免了类似解决方案的一些问题，如Sass的@extend。

我们甚至可以从一个单独的CSS文件中的特定类进行编写：

.element {
  composes: dark-red from "./colors.css";
  font-size: 30px;
  line-height: 1.2;
}

不需要BEM

我们在制作CSS模块时不需要使用BEM。这有两个原因：

1.易于解析–类似代码的类型。对于开发人员来说，显示屏和BEM-y.font-size__serif一样清晰——大。当BEM选择器变长时，可能更容易在心理上解析。

2. 本地范围–假设我们在一个模块中有一个类，比如.big，它会改变字体大小。在另一个例子中，我们使用了完全相同的class.big，它以不同的数量增加了填充和字体大小。这根本不重要！它们不会发生冲突，因为样式的范围非常明确。即使一个模块同时导入两个样式表，它也有一个我们的构建过程专门为该类创建的自定义名称。换句话说，CSS模块的特殊性问题消失了。

酷吧？
这些只是编写CSS模块的一些好处。

有任何github star 之类的需求可以得到我的帮助