css模块的解决办法演进

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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的基本配置。

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3145333

标签

react