CSS模块化

这是我参与更文挑战的第17天，活动详情查看：更文挑战

什么是CSS模块化

CSS模块化就是通过将分模块进行封装，就像是我们在写vue组件的时候一样,也是一个一个模块的封装。

为什么要用CSS模块化

一个东西的产生肯定是有他的意义的。
在没有CSS模块化的时候,如果我们在写组件的时候使用了相同的选择器(比如类名),那么后面的就会将前面的覆盖掉,这也就是样式命名的冲突。
另外,在没有CSS模块化的时候,每一个需要书写样式的类或者标签都是无顺序的排列在style标签当中的,层级结构非常的不清晰。

简单来说就是不便于理解，不便于复用，不便于后期维护。

怎么实现CSS模块化

1、OOCSS

OOCSS可以说是CSS模块化的起源了。这个框架的核心思想是 —— 对象是可重用的模式（pattern），其视觉外观不由上下文决定。

• 上下文无关

也就是说不具体依赖于某个上下文的元素，而是作为一个独立的整体，可复用。

• 主题

为常见的视觉模式创建可复用的类。

• 使用class

使用 class 来命名对象及其子元素，这样可以在不影响样式的情况下修改HTML样式。

• 不建议使用ID

上面说了建议使用class来命名对象，其实也就是说不建议使用id来命名对象。
因为id是唯一的，不利于我们复用它。

2、BEM命名规范

• B:block 块
• E:element 元素
• M:modifier 修饰符

这是一种命名规范,规范如下:

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}
复制代码

2、CSS Modules
CSS就是import引入我们的CSS代码.

• 首先定义CSS文件

.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}

/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}

.otherClassName {
  composes: className from "./style.css";
}

复制代码

• 然后在js模块中导入CSS文件

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

复制代码

• 配置css-loader打包

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};
复制代码

3、 另外还有一种方法就是js来写CSS,
这里就不详细说了

4、CSS的scoped
我们在style标签当中经常看到scoped属性.

<style scoped>
    .container{
        padding:20px;
        background: pink;
    }
</style>
复制代码

我们可以通过scoped属性来隔离样式.

参考文章：

CSS模块化

梳理CSS模块化

没有什么是分块不能解决的，如果分一个不行，那就分两个，直至问题解决。CSS模块化的出现也是为了我们更好的开发，开发的更好。