Rumah > Artikel > hujung hadapan web > css modules是什么
CSS Modules不是一个官方的规范,也不是浏览器的一种机制,而是在构建步骤中对CSS类名和选择器限定作用域的一种方式(类似于命名空间)。通过构建工具的帮助,可以将class的名字或者选择器的名字作用域化。
本教程操作环境:windows7系统、CSS3版、Dell G3电脑。
css modules是什么
根据CSS Modules在Gihub上的项目,它被解释为:
所有的类名和动画名称默认都有各自的作用域的CSS文件。
所以CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,而是在构建步骤(例如使用Webpack或Browserify)中对CSS类名和选择器限定作用域的一种方式(类似于命名空间)。
css modules优势
解决全局命名冲突问题 css modules只关心组件本身 命名唯一
模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式
解决嵌套层次过深的问题 使用扁平化的类名
为什么引入css Modules?
1)、全局样式冲突
webpack进行打包时,将所有js文件导入到入口App.js文件中,样式也会统一加载到入口中,根据css的layout规则,后面的样式会覆盖掉前面的样式声明,造成全局样式的覆盖问题。
2)、嵌套层次过深的选择器
嵌套特别深会造成的问题:
- 根据css选择器的解析规则可以知道,层级越深,比较的次数也就越多,影响整个页面的渲染
- 增加了不必要的字节开销
- 语义混乱 可扩展性不好,约束越多,扩展性越差
3)、无法共享变量
复杂组件要使用 js 和 css 来共同处理样式。
学习视频分享:css视频教程
Atas ialah kandungan terperinci css modules是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!