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

2019-09-21 13:40:02 +08:00
 ericgui
我组长用 styled component，所以我也跟着用，没选择权的。

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


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

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

所以想问一下各位的选择是什么，为什么？谢谢
10527 次点击
所在节点    程序员
68 条回复
jin5354
2019-09-23 10:00:42 +08:00
@jin5354 https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ 修正链接
dany813
2019-09-23 10:15:22 +08:00
@Flands 但是这个还是要学习这个语法糖啊，不习惯
hyy1995
2019-09-23 10:30:47 +08:00
前端真是喜欢玩奇奇怪怪的花样。。。css modules 就行了，楼上有人推荐的 tailwindcss 我看了下，我觉得不好维护，也不利于团队开发。。。
windyCity
2019-09-23 11:06:41 +08:00
我认为 类似 tailwindcss 或者说原子类 （包含基于原子类提取的通用样式），在项目中可以使用，但是，必须控制在在项目内通用性极高的样式，比如，按钮通用样式与按钮交互效果等，提交开发便捷性，但是要严格控制数量，避免造成记忆压力；

团队项目中还是要考虑众人合作的开发舒适度的，不能你认为好用就行
Flands
2019-09-23 11:34:51 +08:00
确实没接触到过原子类这种写法。
惊艳是因为 ‘组合‘ 写出 CSS，这种 ‘一个样式就是一个类’ 的写法很少做，工作项目大部分都是几个样式合并成一个类，然后在项目中复用。
个人感觉这些不矛盾，项目中可以少量原子类以达到复用的目的。只要命名一眼能看懂，`font-size-16`这种。
Sapp
2019-09-30 16:49:24 +08:00
我现在都是这么写的

<span css={(ds) => ({...flexCenter(),width: 50, color: ds.color.primary)}>你瞅瞅</span>
charlie21
2020-11-05 12:59:38 +08:00
component-friendly 本来就是表象 组件复用都是表象，html-friendly 本来就是表象，如果你只看表象，那么诶 你会感觉很不适应，让你感觉不适应的东西会有很多。真正重要的问题是什么？是你关注的是什么。如果你关注的是对于状态的抽象，对于状态的抽象、对于状态的控制、对于状态的精准控制，那么你的日子会好过很多
chenjiangui998
2021-06-06 23:26:48 +08:00
还是 Vue 和 angular 舒服, react 想搞个 CSS 样式隔离都要搞一堆方案还都不完美

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/602811

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX