谈谈 CSS Modules

最近几天由于这篇文章,让大家对 CSS Modules 有了很高的热情。我们团队已经使用 CSS Modules几个月了,所以在这里谈谈我们的经验。

我们的项目是使用React.js 开发,所以我们在开始开发的时候,为了能让我们的组件能够在多个项目中复用,我们开始调研单文件组件的写法,这期间看了React: CSS in JSradium等内容,最终选择的方案是使用 radium 来写 css。

CSS in JS 虽然有很多好处,但是问题很多,让我们很不爽:

  • 骆驼式命名的写法很蛋疼
  • 丢失了 css 得灵活性
  • 不能使用 css 预处理器
  • 不能使用 css 的生态工具,如postcss
  • 非常难以调试,在 devtool 中修改只能修改当前的组件实例

所以我们也一直在寻找更好的方案,直到我们看到了The End of Global CSS这篇文章,我们终于找到了一个完美的方案。

这篇文章利用webpack 的 Local scoped CSS 以及 自己写了一个 postcss 的插件[https://github.com/css-modules/postcss-modules-local-by-default]完成了现在所谓的CSS Modules

再后来该作者给 webpack 的 css-loader 提了 pr,将该功能合并到了 css-loader 中。

然后我们的组件结构就变成了这样

webpack 的目录变成这样

      {
        test: /\.css$/,
        loader: "style!css?module&localIdentName=[hash:base64:5]&-url"
      }

如果想用 sass 只需再加个 sass-loader 就好了 :)

代码类似这样

import styles from './FooBar.css';

import React from 'react';

export default class Demo extends React.Component {

  render() {
    return (
      <div className={styles.root}>
        <p className={styles.text}>Another Local Scope!</p>
      </div>
    );
  }

};

谈谈这样写的好处

  • 保留了很好的组件复用性
  • 消除了全局命名的问题,在组件的 index.css 中可以随意起名字,不用担心命名冲突
  • 和react 结合很好
  • 很方便的按需加载

有问题欢迎讨论

: ) boke.io