前言
来到北京实习已经过去两个礼拜有余，抛去被疫情的疯狂摧残，还是觉得从南到北的这段学习旅程很值得，这礼拜又有新的任务了，根据需求更改组件功能并修改部分UI效果，当我一步一步摸索并疯狂问问问加上自己自以为很熟练的样式修改，终于任务告一段落，当我兴高采烈把结果提交上去，接下来。。。。
A：“你把全局样式改了这么多吗！！？”
（这时候已经有点慌了）
B：“emmm，对，我f12锁定了在那，就在那改了。。”
A：“你觉得这样改合理吗？”
（我立刻意识到问题的严重性）
B：“完蛋，我应该新建一个css去修改对吧😭”
A：“局部组件的样式不论用什么方式，得加作用域防止影响其他地方”
A：“css module 得加 :global 覆盖外部的样式”
.....
其实这个问题不难意识到，也是很多像我这样的前端实习小白会碰到的坑，所以在恶补了很多CSS Modules知识后，写下这篇文章，来提醒自己以后要更加注意这些“小石头”，也为了把我这次刚入职场中新人的坑坑点点暴露出来，让大家碰上后能随心所欲的跨越^_^
走进 CSS Module
什么是CSS Module
-
github上 CSS Module 是这么解释的：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
-
翻译过来可以这么解释：所有的类名和动画名称默认都有各自的作用域的 CSS 文件。那么CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建步骤中对 CSS 类名和选择器限定作用域的一种方式（类似于命名空间）。
为什么要用CSS Module
-
“你肯定碰到过急急忙忙改完样式，但没有考虑到会对以后的更改甚至替换产生什么样的影响吧”
-
“你也一定干过在某个样式文件的结尾加上随意命名的乱七八糟的样式之类吧”
-
“你也肯定碰过添加样式却没有任何作用而苦恼吧“
-
”当然你也碰过和我一样把样式随便写在全局上，而。。。“
这些问题真的太头疼了，作为一个前端程序员，css确实是比较基础的，但是反而是因为这样，我们才会疏忽了很多小问题。所以难道你不想在以后写样式的过程中，让样式更分明，更加安全吗？？？ 不用反驳我，你肯定需要。
恰好，现在使用CSS Module就可以避免这些问题（怎么感觉我像一个传销的），那接下来进入正题！
CSS Module 遇强则强
- 我们都知道，作用域分全局作用域和局部作用域，那么样式也分全局样式和局部样式。知道这点，其实就很明了。
局部作用域
- CSS 的样式规则都是全局的，譬如你写一个main.css,在index.html中引入，这是个全局样式，那如果你想让一个组件或者属性有独有的样式，那你肯定需要写局部样式覆盖全局样式，当然可以写在内联样式中，可是有必要吗！？这时候CSS Module就产生一个规则：创建局部作用域 -> 使用独一无二的类名，独特到就算这个项目有多大，有多少样式，甚至写过哪些样式都不记得了，你都不会重复。
- 就以一个例子为介绍：
App,jsx
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.content}>
Hello World
</h1>
);
};
App.css
.content {
color: yellow;
}
这段代码你可以这么理解：App.jsx中引入App.css并把其输入到style，className中使用style.content，就可以使用到App.css中的样式。
这时候你要问CSS Module做了什么？？？ CSS Module中构建工具会将类名style.content编译成一个哈希字符串。这样是不是很独一无二了！
全局作用域
了解了局部作用域后，全局的就更好理解了，CSS Module中规则定义，可以使用:global(className)在上个例子中就是表示:global(.content)来定义该样式为全局作用域样式。在App.jsx中使用最简单的class写法className="content" 即引入成功。
样式继承（组合）
在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合". 使用compose 即可实现继承。
.a{}
.b{ compose:a }
CSS Module终结
CSS Modules 很好的解决了 CSS 目前面临的一些痛点以及模块化难题，同时也支持与 Sass/Less/PostCSS 等搭配使用。无论是通过遵循的命名标准化的规范，还是使用本文介绍的CSS Modules，目的都是一样：可维护的css代码。具体使用不是有还是要结合自己的场景来决定。适合的才是最好的^_^
最后很感谢的我的主管师兄，给我耐心的解决了这么多坑和问题，相信以后还会有更大的坑等着我:-)
