前端的问题： css modules vs styled components 老铁们选哪个？为什么？

[ericgui]

我组长用 styled component，所以我也跟着用，没选择权的。

我们这是建一个自己的产品，所以 styled component 看起来还是很合适的，虽然我在初期似乎不太习惯。但现在觉得 styled components 很强大


然而，css modules 似乎也不错，关键是把样式和 js 代码分开了，不再`CSS-in-JS`
这样的话，好处也是明显的：如果将来我们要改版，就不会那么费劲了，对吧？

而且我自己在写一个博客，希望做成一个小产品，允许用户们自己设计主题，这必然要提供一系列的 css class，让用户可以自己来覆盖样式

所以想问一下各位的选择是什么，为什么？谢谢

[yuthelloworld]

jss

[newdongyuwei]

我们用的是 css modules。我觉得 styled components 一个好处是编写程序时可以避免在 js/ts 和 css/scss/less 文件间频繁切换。切换多了很耗时的，且分散注意力，阅读 /修改别人写的模块可能也要来回切换。

[newdongyuwei]

styled-jsx 看起来很不错！

[Lxxyx]

styled components。
简单，对于 React Component 友好，不必来回切换，也不用在两个地方重复书写类名。

缺陷也有，复用性没有原始的 css 那么强，体积也比较大（毕竟是个 JS 类库）

[maomaomao001]

你们用 css modules 的话怎么解决不能嵌套写的方式的，
或者说， 如果每个组件一个 css 文件的，感觉 css 文件会居多啊，
有没有办法写一个文件，能用在几个组件里的方案

[bertonzh]

@maomaomao001 一个文件用在几个组件没问题啊，这几个组件引用一个文件就可以。

css modules 主要问题在于如何在父组件里面覆盖自组件的样式，如果有这样的需求就不得不留个口子使用传统 css 方案。

[bertonzh]

@df4VW 我也想不通。我简单看了一下 tailwindcss，这特么不就是很多年之前小范围流行过的 「 css 原子类」吗？
我还以为这种方案早就被业界抛弃了呢。。

[learnshare]

@AnnatarHe 一切都堆到 class 里的歪门邪道（苦笑

[silaike]

@bertonzh 父组件传一个 prop 到子组件，子组件把这个 prop 和本身的 styles 合并覆盖自己的 styles key 值

[connection]

@bertonzh 原子类是降低 css 体积增长的一个很有效方式。

总结还是选最合适 成本最低的

[ochatokori]

每当讨论前端技术的时候，下面就会出现一大堆我没听过的名词
我学不动了！！

[Elmer]

@AnnatarHe 感谢分享，看着不错

[seki]

这两种方案都能解决命名冲突的问题
不过个人觉得 css-in-js 是更便利的方案，动态生成的 css 对于一些需求，比如需要支持多套主题，或者动态变换某些元素的样式之类的，会更方便一点

[Shook]

我想知道，使用 stylus 这样的，要如何处理多套主题呢？

[KuroNekoFan]

都不选，暂时还没发觉选用的必要，引入了反倒没法`cascade`了

[devtiange]

都不用, 用 vue.

[invalidtoken]

@AnnatarHe 看示例代码感觉...嗯？... 就像是换了种方式写内嵌样式

[ericgui]

@devtiange 老铁你这就比较搞笑了。

[miniwade514]

@invalidtoken 你是想说换了个方式写行内样式？这是提供了一些 util class，和写行业样式有本质区别。

在使用 Sass/Less 的项目里，util 可以用 mixin 代替，好处是 class 更少，坏处是编译后的重复代码更多。

我觉得，css module 和 styled components 这种把 CSS 和 JS 揉在一起的写法，是背离“样式与逻辑”分离的设计原则的。更像是 native app 的开发方式。作用域问题，可以通过规范 class 命名解决。

React 火了之后，像 Bootstrap 这样设计很优秀的“传统”前端组件库的关注度越来越少了，其实有很多值得学习的东西。

[attackonFourier]

tailwindcss 这样的 atom class 复杂点的页面你就看你的 class 有多长吧