拿CSS来看，在我们写CSS时，工具侧最大的变化，也就是CSS处理器的使用，如：可能公认最好的SASS。还有PostCSS，提供了另一种不同的解决方案，但也相差不大，属于同种东西，都是输入浏览器不支持的语法，然后 输出浏览器支持的语法。（这里和之前的文章认识不同可以点击《PostCSS的认识误区》查看详细）
现在，引入了CSS模块的概念。本文，将介绍这方面的技术，会讲到这种技术的几点，并且会告诉你怎么使用它。
CSS模块是什么？
官方定义：
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
一个CSS模块就是一个CSS文件，这个文件包含的所有类名和动画名默认都是局部作用域的。
实际比上面讲的要复杂一些，类名默认是局部作用域的，这涉及到一些配置，一个构建过程和一些很难把握的东西。
最终我们把CSS模块定义为一种把相关CSS代码组织成组件，并避免命名冲突的方法。（不用为你组件的命名担心，在构建的过程中会自动生成）。
CSS模块是怎么工作的？
CSS模块要放到构建过程中处理，它本身并不做什么。这看上去像是webpack或browserify的插件。它的工作原理是：当你在js模块里调用CSS模块时（比如：React组件）,CSS模块将根据文件中动态作用域或命名空间里的类名， 声明一个对象字面量，字面量中的类名将被js以字符串的形式调用。
让我们用一个例子来说明。
建一个简单的CSS文件，.base类不是项目中唯一的，它不是作为实际的类名来使用的。它相当于样式里的一个别名，这个别名将在js模块中使用。
.base { color: deeppink; max-width: 42em; margin: 0 auto;} 这里看一下，怎么在JS组件中使用。
import styles from './styles.css';element.innerHTML = `CSS Modules are fun.
查看更多关于理解CSS模块方法_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112150