您好,登录后才能下订单哦!
这篇文章主要讲解了“css为什么需要模块化”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css为什么需要模块化”吧!
sass、less 通过 @import
,部分解决的 css 模块化的问题。
由于 css 是全局的,在被引入的文件和当前文件出现重名的情况下,前者样式就会被后者覆盖。
在引入一些公用组件,或者多人协作开发同一页面的时候,就需要考虑样式会不会被覆盖,这很麻烦。
// file A .name { color: red } // file B @import "A.scss"; .name { color: green }
css 全局样式的特点,导致 css 难以维护,所以需要一种 css “局部”样式的解决方案。
也就是彻底的 css 模块化,@import
进来的 css 模块,需要隐藏自己的内部作用域。
通过在每个 class 名后带一个独一无二 hash 值,这样就不有存在全局命名冲突的问题了。这样就相当于伪造了“局部”样式。
// 原始样式 styles.css .title { color: red; } // 原始模板 demo.html import styles from 'styles.css'; <h2 class={styles.title}> Hello World </h2> // 编译后的 styles.css .title_3zyde { color: red; } // 编译后的 demo.html <h2 class="title_3zyde"> Hello World </h2>
webpack 自带的 css-loader
组件,自带了 CSS Modules,通过简单的配置即可使用。
{ test: /\.css$/, loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]" }
命名规范是从 BEM 扩展而来。
Block: 对应模块名 [name]
Element: 对应节点名 [local]
Modifier: 对应节点状态 [hash:base64:5]
使用 __ 和 -- 是为了区块内单词的分割节点区分开来。
最终 class 名为 styles__title--3zyde
。
在实际生产中,结合 sass 使用会更加便利。以下是结合 sass 使用的 webpack 的配置文件。
{ test: /\.scss$/, loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true" }
通常除了局部样式,还需要全局样式,比如 base.css 等基础文件。
将公用样式文件和组件样式文件分别放入到两个不同的目标下。如下。
. ├── app │ ├── styles # 公用样式 │ │ ├── app.scss │ │ └── base.scss │ │ │ └── components # 组件 ├── Component.jsx # 组件模板 └── Component.scss # 组件样式
然后通过 webpack 配置,将在 app/styles
文件夹的外的(exclude) scss 文件"局部"化。
{ test: /\.scss$/, exclude: path.resolve(__dirname, 'app/styles'), loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true" }, { test: /\.scss$/, include: path.resolve(__dirname, 'app/styles'), loader: "style!css?sass?sourceMap=true&sourceMapContents=true" }
有时候,一个元素有多个 class 名,可以通过 join(" ")
或字符串模版的方式来给元素添加多个 class 名。
// join-react.jsx <h2 className={[styles.title,styles.bold].join(" ")}> Hello World </h2> // stringTemp-react.jsx <h2 className={`${styles.title} ${styles.bold}`}> Hello World </h2>
如果只写一个 class 就能把样式定义好,那么最好把所有样式写在一个 class 中。
所以,如果我们使用了多个 class 定义样式,通常会带一些一些逻辑判断。这个时候写起来就会麻烦不少。
引入 classnames ,即可以解决给元素写多个 class 名的问题,也可以解决写逻辑判断的麻烦问题。
classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' // lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
感谢各位的阅读,以上就是“css为什么需要模块化”的内容了,经过本文的学习后,相信大家对css为什么需要模块化这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。