这几个CSS概念，你了解吗？

【这几个CSS概念，你了解吗？】

本文插图
本文转载自微信公众号「前端那些趣事」，作者树酱君。转载本文请联系前端那些趣事公众号。
聊起css ，印象最深刻的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名 cut picture boy (切图仔) ，在页面布局及还原设计图中广泛使用css来开发页面，我记得刚开始接触最多的就是Bootstrap(用于开发响应式布局、移动设备优先的 WEB) 。然而随着前端突飞猛进的编进，诸如element ， ant design等优秀的ui库出现，在对比中感到审美疲劳。言归正传， css近年来了也催生了蛮多新的解决方案，比如 CSS Modules、styled-components(css in js )、Functional CSS、CSS 原子类、CSS沙盒等等
CSS Module 顾名思义就是 CSS 模块化，为什么需要模块化?我们知道随着基于vue、react开发SPA的web应用，本质上是由多组件搭建而成，就好比用积木来搭房子，如果这个时候两个组件的样式类名重复了，那岂不是就冲突了?为了解决冲突就需要进行模块化区分，没有了命名冲突，更好地让组件间沙箱化，而CSS Module就是css模块化的实现方式之一
CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。
啊呆同学：CSS Module是不是就是Vue: scoped 样式的实现方式呢?
答：不是的， CSS Scope是通过限制作用域来实现，样式在局部生效，而不是真正意义上的css Module
我们知道，当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，它的实现原理是通过PostCSS来实现，通过给相对应的dom新增一个属性，同时给css选择器新增一个对应的属性，来对应这个唯一的dom ，如下所示

本文插图
而css module 是怎么样实现的呢，以vue为例子，如何使用CSS module

webpack 直接引入 vue-loader 使用文档??[1]
vue-cli3内置，可以直接开箱即用，只需要在style标签标记module ，就可以在组件内使用CSS Modules了，更多操作看文档使用文档[2]

下面我们看看CSS Module在vue项目中的编译效果

本文插图
我们可以看到， CSS Modules在最终构建页面时会自动重命名class ，用vue官方描述就是，这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了