V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kcats
V2EX  ›  程序员

css in js 真的好吗?

  •  
  •   kcats · 2019-01-08 23:33:09 +08:00 · 1773 次点击
    这是一个创建于 2148 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2019-01-09 11:43:38 +08:00
    hilbertz
        1
    hilbertz  
       2019-01-08 23:41:23 +08:00
    其实整个 b/s 开发都在逐渐转变为传统的 c/s 开发,浏览器成为了统一的客户端平台,而无论是 dom 还是 css 都由 js 来生成,这其实更贴近程序员的思维模式
    P233
        2
    P233  
       2019-01-08 23:43:51 +08:00
    对我来说 CSS in JS 唯一的优势是可以将 props 传入 CSS 样式创建动态 BEM modifier,其他地方没有能超越 Sass 的地方
    seki
        3
    seki  
       2019-01-08 23:49:19 +08:00
    styled components 之类的是有对应的 ssr 方案的

    需要补充的话,好处还包括不需要再额外思考命名,有 typescript 支持,更方便共享主题变量等等。
    seki
        4
    seki  
       2019-01-08 23:53:23 +08:00
    至于 css 写在 js 文件里让你觉得乱,在我看来,当你有十几个 view,几十个组件的时候,样式文件不管是单独放到 styles 里,还是离调用处尽量近,这一堆样式文件混在 src 文件夹里也挺乱的……
    shyangs
        5
    shyangs  
       2019-01-08 23:53:40 +08:00
    Anything that can be written in JavaScript, will eventually be written in JavaScript.
    duan602728596
        6
    duan602728596  
       2019-01-09 00:22:06 +08:00 via iPhone
    觉得还是 css module 配合 mini-css-extract-plugin 比较好,ssr 的时候直接加载 css 文件。而且单纯只用 css 文件的话,其实样式很乱而且不好维护,我这有个项目就是因为 css 的原因,导致现在连代码分割都做不了了
    duan602728596
        7
    duan602728596  
       2019-01-09 00:24:03 +08:00 via iPhone
    而且我觉得 css module 或者 css in js 和 less sass 并没有冲突。会写 css 的,怎么都能写好,不会写的,用什么最后都是一团糟的
    demonzoo
        8
    demonzoo  
       2019-01-09 11:43:38 +08:00   ❤️ 1
    似乎 angular 优雅的解决了这个问题,不过国内没什么人用罢了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1170 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:06 · PVG 07:06 · LAX 15:06 · JFK 18:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.