React.js 的法国开发者 Christopher Chedeau 分享过一期 react css in js，里面罗列他们如何解决 CSS 中的七个难题：
- CSS 天然的全局命名空间导致的命名冲突
- 依赖
- 无用代码清理
- 命名压缩，比如
.button->.ifd - 共享规则
- 不确定的解析
- 代码分离
React 最后解决这些问题的方法是用 JavaScript 写 CSS 规则，并内联样式。
但内联样式一样存在问题：
:hover、:active这些伪类无法使用- 媒体查询无法使用
- 样式代码也会出现大量重复
诚然我们有各种 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 中了。
当然，使用命名规范并不能解决前面罗列的全部问题。技术常常是一种取舍，世间并没有银子弹.
