css in js 真的好吗?

[kcats]

之前一将近一年没弄前端的东西, 后来又来做前端了, 发现很多跟不上节奏, 有些感觉很别扭的东西, 特别是 css in js 这种操作, 比如像 react 的 styled-components, vue 的 sfc, 后者稍微好一点, 只是把内容混合在同一个文件了, 编译后还是分离的, 主要想说的是 styled-components. 我看了我们厂前面的人写的代码, 几乎全是用 styled-components 写样式, 并且都是和组件一起丢一个文件里面, 看起来特别凌乱. 另外还有一点, 这种方式写的样式只能丢在 js 里面, 结果就是如果做 ssr, 那首屏渲染时的样式就只能等 js 加载完了才能生效了. 所以我个人觉得这种方式是很不合理的, 唯一的好处也就是解决了 css 中语法集不健全, 没有办法像 js 那样好操作变量, 但是这种好处感觉很鸡肋啊, 随便用一个 scss 或者 less 这样的方言就能代替. 不知道社区的人怎么看这种东西?

[hilbertz]

其实整个 b/s 开发都在逐渐转变为传统的 c/s 开发，浏览器成为了统一的客户端平台，而无论是 dom 还是 css 都由 js 来生成，这其实更贴近程序员的思维模式

[P233]

对我来说 CSS in JS 唯一的优势是可以将 props 传入 CSS 样式创建动态 BEM modifier，其他地方没有能超越 Sass 的地方

[seki]

styled components 之类的是有对应的 ssr 方案的

需要补充的话，好处还包括不需要再额外思考命名，有 typescript 支持，更方便共享主题变量等等。

[seki]

至于 css 写在 js 文件里让你觉得乱，在我看来，当你有十几个 view，几十个组件的时候，样式文件不管是单独放到 styles 里，还是离调用处尽量近，这一堆样式文件混在 src 文件夹里也挺乱的……

[shyangs]

Anything that can be written in JavaScript, will eventually be written in JavaScript.

[duan602728596]

觉得还是 css module 配合 mini-css-extract-plugin 比较好，ssr 的时候直接加载 css 文件。而且单纯只用 css 文件的话，其实样式很乱而且不好维护，我这有个项目就是因为 css 的原因，导致现在连代码分割都做不了了

[duan602728596]

而且我觉得 css module 或者 css in js 和 less sass 并没有冲突。会写 css 的，怎么都能写好，不会写的，用什么最后都是一团糟的

[demonzoo]

似乎 angular 优雅的解决了这个问题，不过国内没什么人用罢了