CSS模块介绍

前端开发越来越快，这应该是每个前端开发者的亲身体验，但CSS却是前端领域中发展最慢的部分。ES678的迅速普及，使得前端工程越来越成熟，CSS已经被远远甩在了后面。JS语言模块已经标准化，CSS还在探索中。同时，这也是一个亟待解决的问题。如果您以前从未听说过CSS模块，那么本文适合您。如果您知道它，则无需再阅读它，因为它真的很简单（而且功能强大）。我们都知道CSS的痛点。CSS入门容易，深入难。简单的样式很难维护。CSS痛点也很多。1、CSS规则是全局的，任何一个组件的样式规则对整个页面都有效。相信写css的人都会遇到样式冲突（污染）的问题。2.为了解决全局污染的问题，让我们把类名写的长一点，加一个父选择器，减少冲突的几率，这样CSS命名就乱了。3、组件依赖管理不彻底，组件之间应该相互独立。导入组件时，只导入组件需要的CSS样式。4.代码难以复用。sassless、CSS模块化方案等工具应运而生。前端发展很快，每天都有新的轮子。自然而然，CSS模块化的解决方案有很多，但主要分为三大类：1、命名规范和标准化的CSS解决方案如：BEM、OOCSS、AMCSS、SMACSS2、CSSinJS完全摒弃CSS，使用JavaScript编写CSS规则，styled-components就是代表之一。3、使用JS管理样式模块使用JS编译原生CSS文件，使其模块化，以CSSModules为代表。但是这些模块化的方案各有优缺点，比如命名规范：命名复杂，CSSinJS：缺乏扩展，CSSModules，当然也有一些缺点（先学习一下再说优缺点).在众多的解决方案中，没有绝对的优势或劣势。还是要根据自己的场景来决定。使用CSSModulesCSSModules并没有将CSS转化为编程能力，而是增加了局部作用域和依赖管理，刚好解决了最大的痛点。可以有效避免全局污染和样式冲突，可以最大限度的结合现有的CSS生态和JS模块化能力。启用CSS模块CSS模块很容易学习。webpack自带的css-loader组件自带CSSModules，通过简单配置即可使用。//webpack.config.jsconstpath=require('path')module.exports={entry:__dirname+'/src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist')},module:{rules:[{test:/\.css$/,use:['style-loader',{loader:'css-loader',options:{modules:true,}}]}]}}//你也可以使用下面的语法//loader:"style-loader!css-loader?modules"现在让我们写一个Button组件/*Button.css*/.primary{background-color:#1aad19；颜色：#fff；边框：无；border-radius:5px;}//Button.jsimportstylesfrom'./Button.css';console.log(styles);//->{primary:"yTXmm0isaXExoYiZUvKxH"}constButton=document.createElement('div')Button.innerHTML=`提交`导出默认按钮//索引.jsimportButtonfrom'./components/Button'constapp=document.getElementById('root')app.appendChild(Button)将HTML生成为