摘要：局部样式通过，部分解决的模块化的问题。全局样式的特点，导致难以维护，所以需要一种局部样式的解决方案。也就是彻底的模块化，进来的模块，需要隐藏自己的内部作用域。
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";
Hello World
// 编译后的 styles.css
.title_3zyde {
color: red;
}
// 编译后的 demo.html
Hello World
webpack 与 CSS Modules
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... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的...
阅读 808·2021-11-25 09:43
阅读 1672·2021-09-29 09:42
阅读 1892·2019-08-30 15:55
阅读 3413·2019-08-30 15:54
阅读 2617·2019-08-30 13:20
阅读 3500·2019-08-29 13:25
阅读 907·2019-08-28 18:03
阅读 1776·2019-08-26 13:44
