本文介绍: 随着 react、vue 等基于模块化的框架的普及使用,我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件,然后像搭积木一样将多个小组件组成最终呈现的页面。但是我们知道,css 是根据类名去匹配元素的,如果有两个组件使用了一个相同的类名,后者就会把前者的样式给覆盖掉,看来解决样式命名的冲突是个大问题。为了解决这个问题,产生出了 CSS 模块化的概念。
发展历程
从Web技术来讲
从书写css来讲
概念理解
CSS 模块化是一种将 CSS 代码划分为独立、可复用的模块的方法。它的目标是提高代码的可维护性、可扩展性和重用性。以下是对 CSS 模块化的理解:
实现方式
不同模块化的实现利弊也有所不同
命名约定:
优点:
缺点:
命名空间:
优点:
缺点:
CSS 预处理器:
优点:
缺点:
CSS-in-JS:
优点:
缺点:
CSS Modules:
优点:
缺点:
当然,不同模块化的实现使用场景也有所不同
需要根据项目的规模、团队的需求以及开发者个人偏好来选择合适的 css 模块化实现方式,有的情况下,也可以结合不同的方式来组合使用,来满足具体的需求。
总结
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。