这是未来的趋势所向，如是我行。
注意：原文发表于 2017-9-6，随着框架不断演进，部分内容可能已不适用。
CSS 日渐惹人憎恶。
究其原因颇多，归根结底，皆因 CSS 给人的感觉总是飘渺迷蒙、变幻莫测。
譬如微调某个样式后，却出乎意料地殃及一些看似毫无瓜葛的布局，尤其是准备部署之时。
这类经验如果你从未体会过的话，你要么是不明就里的新手，要么是登峰造极的高人。
故此 JavaScript 社区又开始撸起袖子着手炮制，只消数载，各色各样的 CSS 库宛如雨后春笋不断涌现，它们统称为 CSS-in-JS。
然而 CSS 最棘手的问题也许并不需要 CSS-in-JS 亦可解决，对此你可能还不知情。
倘若果真如此，那么编写 CSS 将是一种惬意的享受，而非痛苦的忍受，此外，CSS-in-JS 也会产生新的问题要去解决，未免有点旁生枝节。
本文并非要和 CSS-in-JS 针锋相对，也不否定社区所做的努力，它在 JS 生态中如此活跃，且每周都有新的想法出现。
其实我目的是想介绍一种让人更加愉快的替代方案 —— 它就是带有真正 CSS 的单文件组件！
CSS 最大的问题
CSS 中的一切都是全局的，正因如此，为某个标记上编写的样式，可能会使另一个标记受到牵连。
也正因如此，开发者经常借助于各种命名空间的约定（而非“规则”，因为难以实施），但此法只会徒增 RSI 的风险。
如果你置身于团队之中，情况愈加恶劣。他人所写的样式无人敢改，通常无法猜测它们是做什么用的，应用在哪些标记了，以及如果删掉会带来什么灾难。
其结果是：样式表必须只增不减。
你无法得知哪些代码可以安全地删除。因此常见的做法是用一些更具体的样式来覆盖现有样式，哪怕是在相对较小的项目上亦是如此。
单文件组件扭转乾坤
SFC 背后的思想十分简单：在一份 HTML 文件中编写组件，该文件可以包含描述组件样式的