温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中 modules的作用是什么

发布时间:2021-05-11 15:11:02 来源:亿速云 阅读:222 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关css中 modules的作用是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

css的全称是什么

css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

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中 modules的作用是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI