模块化 React.js CSS

React.js 的法国开发者 Christopher Chedeau 分享过一期 react css in js，里面罗列他们如何解决 CSS 中的七个难题：

1. CSS 天然的全局命名空间导致的命名冲突
2. 依赖
3. 无用代码清理
4. 命名压缩，比如 .button -> .ifd
5. 共享规则
6. 不确定的解析
7. 代码分离

React 最后解决这些问题的方法是用 JavaScript 写 CSS 规则，并内联样式。

但内联样式一样存在问题：

1. :hover、:active 这些伪类无法使用
2. 媒体查询无法使用
3. 样式代码也会出现大量重复

诚然我们有各种 workarounds 解决伪类、媒体查询等问题，但我有些担心它们的可用性、可维护性 – 说到底，它们只是 workaround。

还是回到 CSS 命名约定上。

Google 工程师 Philip Walton 一直推荐 BEM，因为 BEM 可以很好地解决我们的 CSS 模块化问题，在 BEM 的定义里，我们可以把模块样式写在以模块名命名的 CSS 文件中，注意，我们的操作系统不允许同一目录下存在同名 CSS 文件，于是我们就巧妙地绕过了 CSS 命名冲突的问题 – 我承认，项目庞大的话，后面可能出现「行者孙、孙行者、者行孙」这样的奇怪命名。把 BEM 的这个思路应用到 React 上，则我们解决了模块化问题，也不会碰上 React 内联样式里伪类、媒体查询无法使用的问题。

但是，如果把 CSS 文件分散到各个 CSS 文件中，我们就会碰上合并、打包 CSS 的问题。不过 BEM 是成套的，我们最常说及的只是它的命名约定，围绕命名约定，它还提供整套的工具。又或者，如果你跟我一样，也在使用 jspm，则它已经可以解决 CSS 的合并、打包问题。

比如我的一个业余项目，样式表结构如下：

[resp_image id=’16505′ caption=” ]

在执行 jspm bundle-sfx script/app --minify 命令后，所有 CSS 文件就被打包到一个 build.css 中了。

当然，使用命名规范并不能解决前面罗列的全部问题。技术常常是一种取舍，世间并没有银子弹.