一个新的条目 加入 CSS-in-JS 领域！看起来这个想法是为每个组件编写一个单独的 CSS 文件。您必须在组件中工作，这就是整个工作原理。与 styled-components、css-modules 和 glamorous 处于同一领域。
然后你写 :scope { }，这是该组件的基本样式。我想这意味着你不用选择名称了！但也意味着你被锁定得很紧（几乎所有样式处理设置都是如此）。
然后 CSS 和组件都进行编译，并可能与其合作伙伴工具 OptiCSS 一起进行优化。最终结果是超级优化的样式。由于它是“模板感知的”，因此样式的优化程度远远超过任何尝试独立优化 CSS 的系统。
使用 CSS Blocks 和其核心运行的 OptiCSS，您可以编写符合人体工程学的 CSS，并让构建过程负责使您的样式表正确地作用域化、快速且非常小。
速度、样式作用域以及从不/很少出现未使用的 CSS 绝对对我来说是最大的好处。迁移起来并非易事，但听起来对于许多大型网站和新网站来说都是值得的。
一些设置存储库可供探索，以了解其工作原理：css-blocks-webpack-3 和 css-blocks-hello-world。