资讯专栏INFORMATION COLUMN

你的 css 也需要模块化

Pikachu / 2583人阅读

摘要:局部样式通过,部分解决的模块化的问题。全局样式的特点,导致难以维护,所以需要一种局部样式的解决方案。也就是彻底的模块化,进来的模块,需要隐藏自己的内部作用域。

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 模块,需要隐藏自己的内部作用域。

CSS Modules 原理

通过在每个 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.jsx

Hello World

// stringTemp-react.jsx

Hello 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

相关文章

  • CSS 模块

    摘要:通过使用或者从中导入文件使得模块被编译成为可能。模块一次只运行一个文件,这样可以避免全局上下文的污染。下面让我们用重构这些这些代码这是一个进化版,但是我们仅仅只达到了一部分目标。 原文:http://glenmaddern.com/articl...译者:@公子 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 N...

    elarity 评论0 收藏0
  • CSS 模块

    摘要:通过使用或者从中导入文件使得模块被编译成为可能。模块一次只运行一个文件,这样可以避免全局上下文的污染。下面让我们用重构这些这些代码这是一个进化版,但是我们仅仅只达到了一部分目标。 原文:http://glenmaddern.com/articl...译者:@公子 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 N...

    Enlightenment 评论0 收藏0
  • 提升你的CSS姿势

    摘要:父类为,代表着一系列文章的列表。对于可读性较好地与代码,不应该像一本书,而应该像一个故事,一个故事中会存在角色和角色之间的关系,而这种更多的语义化地可以较好地提示你整个代码的可维护性。无论哪种文件组织方式比较顺眼,你都应该遵循统一的原则。 原文地址。本文从属于Web 前端入门与最佳实践。 CSS的学习是一个典型的低门槛,高瓶颈的过程,第一次接触CSS的时候觉得一切是如此简单,直到后面越...

    dingding199389 评论0 收藏0
  • CSS Grid布局:什么是网格布局

    摘要:网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域,其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...

    xiaoqibTn 评论0 收藏0
  • 13个帮你提高开发效率的现代CSS框架

    摘要:官网是围绕构建的,是一个免费的开源框架。官网在压缩后仅为,以移动优先的理念为中心。官网被称为轻量级响应式现代化,是一个基于的框架。通过添加主题或自定义组件能够帮你进一步开发个性化的。官网有时框架可以包含仅对其原始开发人员有意义的类名。 翻译:疯狂的技术宅原文:https://1stwebdesigner.com/mo... 本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的...

    xumenger 评论0 收藏0

发表评论

0条评论

Pikachu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<