摘要:局部样式通过,部分解决的模块化的问题。全局样式的特点,导致难以维护,所以需要一种局部样式的解决方案。也就是彻底的模块化,进来的模块,需要隐藏自己的内部作用域。
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";webpack 与 CSS ModulesHello World
// 编译后的 styles.css .title_3zyde { color: red; } // 编译后的 demo.htmlHello World
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.jsxHello World
// stringTemp-react.jsxHello World
如果只写一个 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 Modules 的样式模块,每个 class 每次都要写 styles.xxx 也是很麻烦,在《深入React技术栈》提到了 react-css-modules 的库,来减少代码的书写,感兴趣的同学可以研究下。
参考资料:
《深入React技术栈》
css-modules
CSS Modules 用法教程
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115484.html
摘要:通过使用或者从中导入文件使得模块被编译成为可能。模块一次只运行一个文件,这样可以避免全局上下文的污染。下面让我们用重构这些这些代码这是一个进化版,但是我们仅仅只达到了一部分目标。 原文:http://glenmaddern.com/articl...译者:@公子 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 N...
摘要:父类为,代表着一系列文章的列表。对于可读性较好地与代码,不应该像一本书,而应该像一个故事,一个故事中会存在角色和角色之间的关系,而这种更多的语义化地可以较好地提示你整个代码的可维护性。无论哪种文件组织方式比较顺眼,你都应该遵循统一的原则。 原文地址。本文从属于Web 前端入门与最佳实践。 CSS的学习是一个典型的低门槛,高瓶颈的过程,第一次接触CSS的时候觉得一切是如此简单,直到后面越...
摘要:网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域,其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...
摘要:官网是围绕构建的,是一个免费的开源框架。官网在压缩后仅为,以移动优先的理念为中心。官网被称为轻量级响应式现代化,是一个基于的框架。通过添加主题或自定义组件能够帮你进一步开发个性化的。官网有时框架可以包含仅对其原始开发人员有意义的类名。 翻译:疯狂的技术宅原文:https://1stwebdesigner.com/mo... 本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的...
阅读 783·2021-11-25 09:43
阅读 1563·2021-09-29 09:42
阅读 1866·2019-08-30 15:55
阅读 3345·2019-08-30 15:54
阅读 2584·2019-08-30 13:20
阅读 3466·2019-08-29 13:25
阅读 874·2019-08-28 18:03
阅读 1712·2019-08-26 13:44