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 class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled" 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关键字

.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这个样式
}

 

下次总结webpack的基本配置。