你不需要 CSS-in-JS：我为什么使用样式表
CSS-in-JS 现在非常流行。但它真的是最佳选择吗？
解决你不需要解决的问题
别误会，CSS-in-JS 的确是个很棒的解决方案，但它解决的是大多数人不会遇到的问题。采用高度隔离的组件维护方式，绝对有助于解决以下问题：
- 层叠样式带来的意外副作用
- 帮助团队制定规则
- 在发展过程中避免互相冒犯
但只有当团队规模庞大，拥有众多开发人员和庞大的组件库时，这些问题才会真正出现。
所以你想让我用什么？
要想从更高的层面看待问题，你可以养成一些基本习惯：
- 制定并遵循一些基本的写作规则
- 使用工具或制定标准进行组织
- 采用 BEM等方法进行开发
这将消除小型（或大型）项目中的所有这些顾虑，实际上还能让工作更轻松。
CSS-in-JS 的优势在于……
帮助大型团队保持理智
这种解决方案存在的部分原因是，大型团队在处理庞大的库时很难避免冲突。将组件及其所有影响因素放在一个隔离的区域内，有助于避免团队成员互相干扰，并防止无意中对应用程序进行级联式修改。这固然很好，但更有可能的是，你只是少数几个人（或者独自一人）在开发一个小型应用程序。如果你和你的团队连一些基本规则和标准都无法沟通，我认为你们面临着更大的问题。
从某种程度上来说，这消除了学习 CSS 的必要性（某种程度上）。
有些开发者嘲笑 CSS，说它不是真正的代码；另一些开发者则对它的“魔力”感到畏惧（别害怕，拥抱它吧）。只需要在一个组件中关注几条规则，就能让人们安心，因为他们知道这只是少量改变外观的 JavaScript 代码而已。
它们各自能做什么？
热模块重装（HMR）
虽然有人认为 CSS-in-JS 的优势在于热模块替换 (HMR)，但你会发现它与样式表配合使用效果也很好。有时，如果你正在开发一个需要重新渲染的组件（例如那些依赖网络请求的组件），CSS 的更改不会强制重新渲染，那么 CSS-in-JS 的效果甚至更好一些。
变量、全局设置
如果有人认为 CSS 做不到这一点，那是因为他们很久没关注这方面的信息了。Sass 不仅能做到这一点，而且 现代浏览器本身就支持这种功能。
封装
是的，你不需要使用 JavaScript 来实现这一点。只需在组件或页面的顶级元素上添加一个类名，将所有样式嵌套在其中，就完成了封装。
.page-about {
.header {
background-color: red;
}
}
.navigation {
.button {
background-color: blue;
}
}
绒毛
还有很多
说实话，两者之间可能还有很多相似之处，只是你没有意识到而已。
样式表和 SASS 的优势在于……
规则共享和配置
SASS 允许您配置变量、自定义函数和 mixin，从而将您的 CSS 开发提升到一个新的水平。
忽略错误的选择器名称：
// settings.scss
$color-ultraviolet: #5F4B8B;
// colbys-styles.scss
@import "settings";
.colbys-text-color {
color: $color-ultraviolet
}
.colbys-background-color {
background-color: $color-ultraviolet
}
虽然这种方法的语法和配置可能比在 JS 中设置一堆对象配置要容易得多，但它极大地帮助你提供一致的视觉体验，并使你的代码更加简洁（DRY）。
响应式设计
优秀的前端工程师需要具备诸多素质，其中之一就是关注项目在不同设备和尺寸上的显示效果。总而言之，用户体验是每个人的责任。以响应式优先的理念进行开发，不仅能简化流程，还能帮助打造更优质的产品。
在 JavaScript 中实现组件响应式设计意味着需要编写更多的 JavaScript 代码和添加更多的事件监听器。这不仅会增加代码的复杂性，还会影响性能。而将媒体查询直接集成到 CSS 中，则可以更轻松地实现这一点。
.colbys-sidebar {
width: 100%;
}
// NO EVENT LISTENERS
@media (min-width: 1024px) {
.colbys-sidebar {
width: 25%;
}
}
媒体查询无需限制事件监听器，无需确保事件监听器在卸载时取消注册，也无需以“react 的方式”处理所有这些，它会按需触发，并以更一致的方式根据需要翻转样式。
降低组件的复杂度
专注于功能和渲染输出，可以避免引入库或复杂的方法来将 CSS 修补到 JS 中，更不用说为了让它正常工作而使用的那些 JS hack 了。
// This is an exaggeration
const styles = {
color: blue;
}
if ( whos_favorite === 'Colby' || whos_favorite === 'Lord Commander' ) {
styles.color = 'ultraviolet';
} else if ( whos_favorite === 'The Gary' ) {
styles.color = 'red';
} else if ( whos_favorite === 'Mooncake' ) {
styles.color = 'green';
} else if ( whos_favorite === 'HUE' ) {
styles.color = 'blue';
} else if ( whos_favorite === 'KVN' ) {
styles.color = 'yellow';
}
<MyCompnent styles={styles} />
表现
减少 JavaScript 代码总是有益的。这意味着浏览器需要加载的内容更少，需要编译的内容也更少，最终会提升页面加载速度。浏览器加载页面时，会尽可能地优化 HTML 和 CSS。没错，你可能会预先加载更多 CSS，但更多的 JavaScript 代码开销很大，而且更容易导致页面 完全重新渲染。
许多用 JavaScript 实现的魔法效果都可以用一些非常强大的 CSS 动画方法来实现，只需浏览一下 Codepen 或看看 Animista之类的工具即可。
除了几条不错的笔记 和一些 CSS-in-JS 的基准测试之外，我实际上没有任何相关数据 。 有人做过这方面的研究吗？
归根结底，做有效的事情。
每个人都有自己的偏好，每个人的效率提升方式也不同。 做对你最有利的事，做对你的团队最有利的事，不要把其他开发者的说法当作教条式的对错标准。
如果你是项目中的独立开发者，想练习 CSS-in-JS 以便将来在大团队中也能熟练运用，那就去做吧！如果你在 Facebook 的庞大团队中，想使用样式表，那么如果每个人遵循的规范不同，你可能会遇到一些问题，但还是要选择对你和你的团队最有利的方式。
唯一能弄清楚这一点的方法就是经验和实验。两种方案都试试，然后找出你认为哪种更好的原因。你永远无法预知，最终你会进入谷歌还是在自家车库里创办一家新公司。
直接在您的收件箱中获取更多内容！
原文发表于2019年7月18日，网址为colbyfayock.com
文章来源：https://dev.to/colbyfayock/you-don-t-need-css-in-js-why-i-use-stylesheets-20