为什么CSSModules
时间：2023-03-31 01:16:08
CSS
CSSModules引入CSSModules（一）全局样式冲突？webpack打包时，所有的js文件都导入到入口App.js文件中，样式也加载到入口中。根据css的布局规则，后面的样式会覆盖前面的样式声明，造成全局样式覆盖的问题。(2)嵌套层次过深的选择器，为了解决全局样式的冲突，不得不引入一些专门命名的命名空间来区分，但往往有些命名空间命名不够明确，会导致下一个样式无法被覆盖。需要增加一个新的命名空间来区分，最终一个元素的显示样式可能会嵌套的特别深。特别深的嵌套带来的问题：-根据CSS选择器的解析规则，层级越深，比较的次数越多，会影响整个页面的渲染-增加不必要的字节开销-语义混乱可以扩展不好，约束越多，扩展性越差（3）无法共享变量复杂组件需要使用JS和CSS共同处理样式：不能解决全局样式冲突的问题（2）BEM（BlockElementModifier）解决命名冲突和更好的语义。Block：具有独立逻辑和页面功能的页面组件。它是一个可重复使用的单元，具有以下特点：设置组合可以放置在任何页面的任何位置，而不影响功能和外观。它可以重复使用。接口可以有相同块的任意数量的实例。select]定义Block和Element的外观和行为，就像HTML属性一样，让同一个Block看起来不一样有一个问题：需要体现语义的元素的命名会对嵌套层级造成很大的伤害对于multi-人协作，需要统一命名规范，也会造成额外的工作量CSSModules(一)什么是cssmodules？通过构建工具使指定类到达作用域的过程（二）cssmodules的优点解决全局命名冲突问题cssmodules只关心组件本身的命名。模块化可以使用composes引入自己模块中的样式和另一个模块的样式，解决深度嵌套的问题。使用扁平类名（3）启用css模块的用法cssmodulesfunction由于css模块对样式的处理逻辑放在loader中，所以在css-loader中启用css-loader{test:/\.css$/,使用:[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'./build/styles'}},{loader:"css-loader",options:{importLoaders:1,modules:true,localIdentName:"[name]__[local]___[hash:base64:5]"//为了生成一个不是纯随机的类名}}]}修改样式的引入在index.js文件中方法importstylesfrom'./index.css';//导出对象的格式为键值对编译类use//index.css.color{color:blue;}//index.jsimportstylesfrom'./index.css';//导出对象的格式是键值对//jsx使用转换后的类名
//如果类名下划线，使用styles['color-style'](4)其他用法局部变量和全局变量：局部按localIdentName规则处理（类名默认不用写就可以编译）：全局样式编译后保持不变/*以下两种类型编译*/.normal{颜色：绿色；}:local(.normal){颜色：绿色；}/*下面两个类型不会被编译*///多个类不会被编译:global{.link{color:green;}.box{颜色：黄色；}}//单个类不编译：global(.box){color:blue;}组合类（需要样式重用，在CSSModules中，一个选择器可以继承另一个选择器的规则）本身导入的声明会有一个更高优先级/*在同一个css文件中重用类*/.bg{background-color:blue;}.title{组成：bg;白颜色;}//导入样式在js中使用from'./test.css';<分区分类assName={styles.title}>cssmodules
//生成的HTML
cssmodules /*在不同的css文件中重用类*//*color.css*/.red{颜色：红色；}.blue{颜色：蓝色；}/*index.css*/.red{颜色：红色；}.header{字体大小：32px；}.title{颜色：绿色；组成：来自'./color.css'的蓝色；border-bottom:1pxsolid#ccc;填充底部：20px；}CSS和JS变量共享（:export关键字可以将CSS中的变量导出到JS）/*index.scss*/$primary-color:#f40;:export{primaryColor:$primary-color;}/*app.js*/importstylefrom'index.scss';//将输出#F40console.log(style.primaryColor);备注如果在项目中使用antd，需要不编译antd风格。使用exclude在exclude中排除指定目录下的资源关闭node-modules中的css-module，打开自己写的src下css中的css-module{test:/\.css$/,exclude:/node_modules|antd\.css/,use:[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'./build/styles'}},{loader:"css-loader",options:{importLoaders:1,modules:true,localIdentName:"[name]__[local]___[hash:base64:5]"//为了生成不是纯随机的类名}}]}在项目中使用stylelint进行css检查需要忽略stylelint配置中的css-modules关键字module.exports={rules:{'selector-pseudo-class-no-unknown':[true,{ignorePseudoClasses:['export','import','global','local','external',],},],'selector-type-no-unknown':[true,{ignoreTypes:['from'],},],'property-no-unknown':[true,{ignoreProperties:['composes','compose-with'],},],'at-rule-no-unknown':[true,{ignoreAtRules:['value'],},],},};推荐css解决方案文章：React拾取：从10个流行的CSS解决方案说说我最喜欢的（上）CSSModules介绍和React中的实践
