css为什么需要模块化

这篇文章主要讲解了“css为什么需要模块化”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css为什么需要模块化”吧！ sass、less 通过 @import ，部分解决的 css 模块化的问题。由于 css 是全局的，在被引入的文件和当前文件出现重名的情况下，前者样式就会被后者覆盖。
在引入一些公用组件，或者多人协作开发同一页面的时候，就需要考虑样式会不会被覆盖，这很麻烦。css 全局样式的特点，导致 css 难以维护，所以需要一种 css “局部”样式的解决方案。
也就是彻底的 css 免费云主机、域名模块化，@import 进来的 css 模块，需要隐藏自己的内部作用域。通过在每个 class 名后带一个独一无二 hash 值，这样就不有存在全局命名冲突的问题了。这样就相当于伪造了“局部”样式。webpack 自带的 css-loader 组件，自带了 CSS Modules，通过简单的配置即可使用。命名规范是从 BEM 扩展而来。Block: 对应模块名 [name]Element: 对应节点名 [local]Modifier: 对应节点状态 [hash:base64:5]使用 __ 和 — 是为了区块内单词的分割节点区分开来。
最终 class 名为 styles__title--3zyde。在实际生产中，结合 sass 使用会更加便利。以下是结合 sass 使用的 webpack 的配置文件。通常除了局部样式，还需要全局样式，比如 base.css 等基础文件。
将公用样式文件和组件样式文件分别放入到两个不同的目标下。如下。然后通过 webpack 配置，将在 app/styles 文件夹的外的(exclude) scss 文件”局部”化。有时候，一个元素有多个 class 名，可以通过 join(" ") 或字符串模版的方式来给元素添加多个 class 名。如果只写一个 class 就能把样式定义好，那么最好把所有样式写在一个 class 中。
所以，如果我们使用了多个 class 定义样式，通常会带一些一些逻辑判断。这个时候写起来就会麻烦不少。引入 classnames ，即可以解决给元素写多个 class 名的问题，也可以解决写逻辑判断的麻烦问题。感谢各位的阅读，以上就是“css为什么需要模块化”的内容了，经过本文的学习后，相信大家对css为什么需要模块化这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: Docker如何使用start命令启动容器

小编给大家分享一下Docker如何使用start命令启动容器，相信大部分免费云主机、域名人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！以上是“Docker如何使用start命令启动容器”这篇文章…