css模块的解决办法 演进
1. 手动分模块
（早期办法 ，这样容易相互覆盖，冗余代码，嵌套过深） 刀耕火种的时代了
2. css预处理（sass/less等）
css预处理器最大的好处就是可以支持模块引入，用js的方式来编写CSS，编译之后，终究还是一个文件，因此不可避免的会出现冲突样式
插个题外话：sass vs scss Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
3. BEM :BEM就是为了解决命名冲突以及更好的语义化而生的
BEM名词解释：
- Block：逻辑和页面功能都独立的页面组件，是一个可复用单元，特点如下：
可以随意嵌套组合
可以放在任意页面的任何位置，不影响功能和外观
可复用，界面可以有任意多个相同Block的实例
- Element：Block的组成部分，依赖Block存在（出了Block就不能用）
- Modifier [可选] 是一个元素的状态显示，例如active、current、selected，只能定义Block和Element的外观及行为，
【说明】
- Block完全独立，可以嵌套，一个header是一个Block，header下的搜索框也可以是一个Block
不可能出现Block__Element-father__Element-son_Modifer这种类名的写法，BEM只有三级
- Modifier可以加在Block和Element上面
- Modifier作为一个额外的类名加载Block和Element上面，只是为了改变状态，需要保留原本的class
示例：
<form>
<input type="text" />
<input
type="submit" />
</form>解释：
form是一个Block, form--theme-xmas, form--simple是Modifier 依附在form这个Block上，用来改变不同样式
form__input 是Element,在Block下的元素
form__submit也是Element, form__submit--disabled 是Modifier 依附在form__submit这个Element上，用来表示不可提交状态
4. CSS Modules
CSS Modules并不是一个正式的声明或者是浏览器的一个实现，而是通过构建工具（webpack or Browserify）来使所有的class达到scope的一个过程
css modules是如何解决痛点的。
- 编译后独一无二的样式名，避免了命名冲突
/* 编译之后可能是这样的 */
.App__text___3lRY_ {
color: red;
}- 模块化 （不表，具体上github查看）
- 解决嵌套层次过深的问题 块化 （CSS Modules只关注与组件本身，组件本身基本都可以使用扁平的类名来写
如何使用：
CSS Modules不局限于你使用哪个前端库，无论是react、vue还是Angular，只要你能使用构建工具进行编译打包就可以使用。
以webpack为例
开启css modules功能
默认在css-loader中是不开启css modules功能的，要开启可以设置modules: true即可，更多可以参看官方css-loader使用方法修改webpack.config.js
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './build/styles'
}
},
{
loader: "css-loader",
options: {
modules: true //开启
}
}
]
} 这样经过编译合成一个文件之后，所有的类名都经过了哈希转换，因此确保了类名的唯一性
事实上，有些样式比如布局的样式container是不需要转换成一长串的样式名的，想把它固定写死在了容器上，怎么来写？
全局作用域 要想一个类名不需要被装换，那么可以使用:global(className)来进行包装，这样的类不会被转换
/* global.css */
* {
margin: 0;
padding: 0;
}
:global(.container) {
padding: 20px;
}自定义样式名哈希规则：CSS Modules默认是以[hash:base64]来进行类名转换的
{
loader: "css-loader",
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}类名组合继承：CSS Modules提供了composes关键字
资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com
.red {
color: red;
}
.header {
font-size: 32px;
}
.title {
composes: red header; //composes关键字 表示继承.red和.header
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
composes: ff from './other.css'; //表示从other.css里继承ff这个样式
}
