CSS Modules详解及React中实践

时间  2019-11-05 标签 css modules 详解 react 中 实践

CSS Modules

CSS 是前端领域中进化最慢的一块。因为 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向完全模块化前必须解决的难题。javascript

CSS 模块化的解决方案有不少，但主要有两类。一类是完全抛弃 CSS，使用 JS 或 JSON 来写样式。Radium，jsxstyle，react-style 属于这一类。优势是能给 CSS 提供 JS 一样强大的模块化能力；缺点是不能利用成熟的 CSS 预处理器（或后处理器） Sass/Less/PostCSS，:hover 和 :active 伪类处理起来复杂。另外一类是依旧使用 CSS，但使用 JS 来管理样式依赖，表明是 CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力，API 简洁到几乎零学习成本。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，能够在 Vue/Angular/jQuery 中使用。是我认为目前最好的 CSS 模块化解决方案。近期在项目中大量使用，下面具体分享下实践中的细节和想法。css

CSS 模块化遇到了哪些问题？

CSS 模块化重要的是要解决好两个问题：CSS 样式的导入和导出。灵活按需导入以便复用代码；导出时要可以隐藏内部做用域，以避免形成全局污染。Sass/Less/PostCSS 等前仆后继试图解决 CSS 编程能力弱的问题，结果它们作的也确实优秀，但这并无解决模块化最重要的问题。Facebook 工程师 Vjeux 首先抛出了 React 开发中遇到的一系列 CSS 相关问题。加上我我的的见解，总结以下：html

  1. 全局污染
    CSS 使用全局选择器机制来设置样式，优势是方便重写样式。缺点是全部的样式都是全局生效，样式可能被错误覆盖，所以产生了很是丑陋的 !important，甚至 inline !important 和复杂的选择器权重计数表，提升犯错几率和使用成本。Web Components 标准中的 Shadow DOM 能完全解决这个问题，但它的作法有点极端，样式完全局部化，形成外部没法重写样式，损失了灵活性。前端

  2. 命名混乱
    因为全局污染的问题，多人协同开发时为了不样式冲突，选择器愈来愈复杂，容易造成不一样的命名风格，很难统一。样式变多后，命名将更加混乱。java

  3. 依赖管理不完全
    组件应该相互独立，引入一个组件时，应该只引入它所须要的 CSS 样式。但如今的作法是除了要引入 JS，还要再引入它的 CSS，并且 Saas/Less 很难实现对每一个组件都编译出单独的 CSS，引入全部模块的 CSS 又形成浪费。JS 的模块化已经很是成熟，若是能让 JS 来管理 CSS 依赖是很好的解决办法。Webpack 的 css-loader 提供了这种能力。react

  4. 没法共享变量
    复杂组件要使用 JS 和 CSS 来共同处理样式，就会形成有些变量在 JS 和 CSS 中冗余，Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 共享变量这种能力。webpack

  5. 代码压缩不完全
    因为移动端网络的不肯定性，如今对 CSS 压缩已经到了变态的程度。不少压缩工具为了节省一个字节会把 '16px' 转成 '1pc'。但对很是长的 class 名却无能为力，力没有用到刀刃上。git

上面的问题若是只凭 CSS 自身是没法解决的，若是是经过 JS 来管理 CSS 就很好解决，所以 Vjuex 给出的解决方案是彻底的 CSS in JS，但这至关于彻底抛弃 CSS，在 JS 中以 Object 语法来写 CSS，估计刚看到的小伙伴都受惊了。直到出现了 CSS Modules。github

CSS Modules 模块化方案

CSS Modules 内部经过 ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类。web

:import("path/to/dep.css") {
  localAlias: keyFromDep;
  /* ... */
}
:export {
  exportedKey: exportedValue;
  /* ... */
}

但直接使用这两个关键字编程太麻烦，实际项目中不多会直接使用它们，咱们须要的是用 JS 来管理 CSS 的能力。结合 Webpack 的 css-loader 后，就能够在 CSS 中定义样式，在 JS 中导入。

启用 CSS Modules

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

加上 modules 即为启用，localIdentName 是设置生成样式的命名规则。

/* components/Button.css */
.normal { /* normal 相关的全部样式 */ }
.disabled { /* disabled 相关的全部样式 */ }
/* components/Button.js */
import styles from './Button.css';

console.log(styles);

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 是

<button class="button--normal-abc53"> Processing... </button>

注意到 button--normal-abc5436 是 CSS Modules 按照 localIdentName 自动生成的 class 名。其中的 abc5436 是按照给定算法生成的序列码。通过这样混淆处理后，class 名基本就是惟一的，大大下降了项目中样式覆盖的概率。同时在生产环境下修改规则，生成更短的 class 名，能够提升 CSS 的压缩率。

上例中 console 打印的结果是：

Object {
  normal: 'button--normal-abc546',
  disabled: 'button--disabled-def884',
}

CSS Modules 对 CSS 中的 class 名都作了处理，使用对象来保存原 class 和混淆后 class 的对应关系。

经过这些简单的处理，CSS Modules 实现了如下几点：

  • 全部样式都是 local 的，解决了命名冲突和全局污染问题

  • class 名生成规则配置灵活，能够此来压缩 class 名

  • 只需引用组件的 JS 就能搞定组件全部的 JS 和 CSS

  • 依然是 CSS，几乎 0 学习成本

样式默认局部

使用了 CSS Modules 后，就至关于给每一个 class 名外加加了一个 :local，以此来实现样式的局部化，若是你想切换到全局模式，使用对应的 :global。

.normal {
  color: green;
}

/* 以上与下面等价 */
:local(.normal) {
  color: green; 
}

/* 定义全局样式 */
:global(.btn) {
  color: red;
}

/* 定义多个全局样式 */
:global {
  .link {
    color: green;
  }
  .box {
    color: yellow;
  }
}

Compose 来组合样式

对于样式复用，CSS Modules 只提供了惟一的方式来处理：composes 组合

/* components/Button.css */
.base { /* 全部通用的样式 */ }

.normal {
  composes: base;
  /* normal 其它样式 */
}

.disabled {
  composes: base;
  /* disabled 其它样式 */
}
import styles from './Button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 变为

<button class="button--base-abc53 button--normal-abc53"> Processing... </button>

因为在 .normal 中 composes 了 .base，编译后会 normal 会变成两个 class。

composes 还能够组合外部文件中的样式。

/* settings.css */
.primary-color {
  color: #f40;
}

/* components/Button.css */
.base { /* 全部通用的样式 */ }

.primary {
  composes: base;
  composes: $primary-color from './settings.css';
  /* primary 其它样式 */
}

对于大多数项目，有了 composes 后已经再也不须要 Sass/Less/PostCSS。但若是你想用的话，因为 composes 不是标准的 CSS 语法，编译时会报错。就只能使用预处理器本身的语法来作样式复用了。

class 命名技巧

CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别，分别是：

  • Block：对应模块名，如 Dialog

  • Element：对应模块中的节点名 Confirm Button

  • Modifier：对应节点相关的状态，如 disabled、highlight

综上，BEM 最终获得的 class 名为 dialog__confirm-button--highlight。使用双符号 __ 和 -- 是为了和区块内单词间的分隔符区分开来。虽然看起来有点奇怪，但 BEM 被很是多的大型项目和团队采用。咱们实践下来也很承认这种命名方法。

CSS Modules 中 CSS 文件名刚好对应 Block 名，只须要再考虑 Element 和 Modifier。BEM 对应到 CSS Modules 的作法是：

/* .dialog.css */
.ConfirmButton--disabled {
}

你也能够不遵循完整的命名规范，使用 camelCase 的写法把 Block 和 Modifier 放到一块儿：

/* .dialog.css */
.disabledConfirmButton {
}

如何实现CSS，JS变量共享

上面提到的 :export 关键字能够把 CSS 中的 变量输出到 JS 中。下面演示如何在 JS 中读取 Sass 变量：

/* config.scss */
$primary-color: #f40;

:export {
  primaryColor: $primary-color;
}
/* app.js */
import style from 'config.scss';

// 会输出 #F40
console.log(style.primaryColor);

CSS Modules 使用技巧

CSS Modules 是对现有的 CSS 作减法。为了追求简单可控，做者建议遵循以下原则：

  • 不使用选择器，只使用 class 名来定义样式

  • 不层叠多个 class，只使用一个 class 把全部样式定义好

  • 全部样式经过 composes 组合来实现复用

  • 不嵌套

上面两条原则至关于削弱了样式中最灵活的部分，初使用者很难接受。第一条实践起来难度不大，但第二条若是模块状态过多时，class 数量将成倍上升。

必定要知道，上面之因此称为建议，是由于 CSS Modules 并不强制你必定要这么作。听起来有些矛盾，因为多数 CSS 项目存在深厚的历史遗留问题，过多的限制就意味着增长迁移成本和与外部合做的成本。初期使用中确定须要一些折衷。幸运的是，CSS Modules 这点作的很好：

若是我对一个元素使用多个 class 呢？

没问题，样式照样生效。

如何我在一个 style 文件中使用同名 class 呢？

没问题，这些同名 class 编译后虽然多是随机码，但还是同名的。

若是我在 style 文件中使用了 id 选择器，伪类，标签选择器等呢？
没问题，全部这些选择器将不被转换，原封不动的出如今编译后的 css 中。也就是说 CSS Modules 只会转换 class 名相关样式。

但注意，上面 3 个“若是”尽可能不要发生。

CSS Modules 结合 React 实践

在 className 处直接使用 css 中 class 名便可。

/* dialog.css */
.root {}
.confirm {}
.disabledConfirm {}
import classNames from 'classnames';
import styles from './dialog.css';

export default class Dialog extends React.Component {
  render() {
    const cx = classNames({
      [styles.confirm]: !this.state.disabled,
      [styles.disabledConfirm]: this.state.disabled
    });

    return <div className={styles.root}>
      <a className={cx}>Confirm</a>
      ...
    </div>
  }
}

注意，通常把组件最外层节点对应的 class 名称为 root。这里使用了 classnames 库来操做 class 名。
若是你不想频繁的输入 styles.**，能够试一下 react-css-modules，它经过高阶函数的形式来避免重复输入 styles.**。

CSS Modules 结合历史遗留项目实践

好的技术方案除了功能强大炫酷，还要能作到现有项目能平滑迁移。CSS Modules 在这一点上表现的很是灵活。

外部如何覆盖局部样式

当生成混淆的 class 名后，能够解决命名冲突，但由于没法预知最终 class 名，不能经过通常选择器覆盖。咱们如今项目中的实践是能够给组件关键节点加上 data-role 属性，而后经过属性选择器来覆盖样式。

如

// dialog.js
  return <div className={styles.root} data-role='dialog-root'>
      <a className={styles.disabledConfirm} data-role='dialog-confirm-btn'>Confirm</a>
      ...
  </div>
// dialog.css
[data-role="dialog-root"] {
  // override style
}

由于 CSS Modules 只会转变类选择器，因此这里的属性选择器不须要添加 :global。

如何与全局样式共存

前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。使用 Webpack 可让全局样式和 CSS Modules 的局部样式和谐共存。下面是咱们项目中使用的 webpack 部分配置代码：

module: {
  loaders: [{
    test: /\.jsx?$/,
    loader: 'babel'
  }, {
    test: /\.scss$/,
    exclude: path.resolve(__dirname, 'src/styles'),
    loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true'
  }, {
    test: /\.scss$/,
    include: path.resolve(__dirname, 'src/styles'),
    loader: 'style!css!sass?sourceMap=true'
  }]
}
/* src/app.js */
import './styles/app.scss';
import Component from './view/Component'

/* src/views/Component.js */
// 如下为组件相关样式
import './Component.scss';

目录结构以下：

src
├── app.js
├── styles
│   ├── app.scss
│   └── normalize.scss
└── views
    ├── Component.js
    └── Component.scss

这样全部全局的样式都放到 src/styles/app.scss 中引入就能够了。其它全部目录包括 src/views 中的样式都是局部的。

总结

CSS Modules 很好的解决了 CSS 目前面临的模块化难题。支持与 Sass/Less/PostCSS 等搭配使用，能充分利用现有技术积累。同时也能和全局样式灵活搭配，便于项目中逐步迁移至 CSS Modules。CSS Modules 的实现也属轻量级，将来有标准解决方案后能够低成本迁移。若是你的产品中正好遇到相似问题，很是值得一试。

原发于知乎专栏 http://zhuanlan.zhihu.com/purerender/20495964

联系我们 沪ICP备2021010478号-7