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

[ericgui]

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

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


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

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

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

[zthxxx]

@AnnatarHe
@Flands
@TheFLY
@Elmer
@joshua7v

各位用 tailwind 的是不是学 CSS 的时候都没学过 HTML 内联样式？

[duan602728596]

css-module，因为这个方案解决了写 css 最头疼的问题：命名，同时影响最小。其他方案不喜欢的原因是，IDE 的语法提示不友好，配合 css 预处理器会很麻烦。

[TheFLY]

所以现在表达赞美都这么辛苦了吗，你刚学内联的时候思路能有这么清晰？

[ericgui]

@TheFLY what ?

[luoway]

@AnnatarHe #2
这叫 CSS 原子类。
其实这是错误写法，增加了记忆成本，效果和行内样式一样，仅仅是减少了需要拼写的字符数量。一般前端会以为这能够降低文件尺寸，但如果网页开启了 gzip 压缩，那这种减少不会影响网络数据传输量，因为重复的字符串会被 gzip 压缩。

实际上，这种做法很少会被团队采用，仅有部分个人前端开发会做尝试。可读性是团队开发特别关注的问题，CSS 原子类降低了可读性，所以自概念提出后并没有取得前端社区认可。

[TheFLY]

@ericgui What ？

[AnnatarHe]

@zthxxx

design system 了解一下？另外你说的 inline style 认真的吗？实习生面试能过吗？

[jin5354]

我的天老爷，看了下你们说的 tailwindcss，这不就是 IE6 时代的 CSS 原子类？真实梦回 2012 （苦笑）
三四年前的大厂前端面试 css 部分偶尔还会问问原子类的优劣，这东西就和 bootstrap 一样，适合不讲究时用用，比如后端随便糊出个页面；真实的前端项目都自己好好抽象 css 类，原子类怎么维护

附远古讨论贴： https://www.zhihu.com/question/22110291

[dvaknheo]

bootstrap 要配合 less 来用啊， 不要输出 boostrap 的原子类，而是语义化的 CSS

[TristanYang]

你说的那个组长是不是我？哈哈哈，我现在做项目首选 styled-components 也建议组员用。

[l1xnan]

做的几个 react 项目都是 typescript + css modules

[zthxxx]

@AnnatarHe

是认真的

认真的问你们学的时候，没有学过每个元素都只写内联样式的弊端和局限性吗？

因为回到 CSS 原子类就基本等同于变相写 inline style 内联样式，你的 「才意识到正确的 css 写法」就和楼上说的一样梦回 2012

[dodo2012]

推荐 tailwind 是真的么？这种写法前两年都是不推荐的，怎么又流行起来了？要在 html 里写一堆，增加记忆和代码冗余，可以自己定义一个类不假，但都自己定义了，自己手写不更方便？

[wdhwg001]

Tailwind 确实是个原子类的 CSS 框架，但实际上并不是梦回 2012，因为现在我们可以在原子类的基础上加抽象了，而这也是 Tailwind 所宣传的“Component-friendly”。

在这个基础上，Tailwind 的思想实际上是要更有借鉴性的，即使用原子类的方式对裸 CSS 封装抽象，然后使用前缀的形式划定原子类的响应式范围，然后在组件里整合多个原子类。

相比纯原子类的写法，Tailwind 更希望的应该是“btn btn-blue”这种，对一个元素应用这一整个“原子类、组件类”多级抽象中的一个或多个，从而实现可维护性和开发便利两者的共存。

觉得它的写法只有"clearfix mt30"这样的上古用法的，可能连官网都没看完就喷起来了吧。

[wdhwg001]

更进一步的，Tailwind 同时也遵循了“如非必要，勿增实体”的剃刀律，即如果你快速撸单页，或者需要给富文本加样式的话，完全可以用原子类一把梭，它所提供的原子类也比旧式的“mt30”要更语义化而非数值化。

在这个基础上，要怎样抽象出组件类则基本上是开发者自行决定的，在 Tailwind 一把梭撸出来的页面上把 class 抽象出来也没那么费劲。

[find456789]

@luoway 兄台，你觉得 团队选 bulma 怎么样

[ericgui]

@find456789 我目前就用 bulma

[acthtml]

@AnnatarHe

请教下，你喜欢 tailwind css 的什么特性，没有看到什么优势啊？ 主要是将基础样式抽象成类目，当这个写法跟行内样式没啥区别，只方便了前期原型开发，后期不利于维护。

[luoway]

@find456789 #56 CSS 框架能够提高开发效率，只是过于细碎的原子类则因为降低了可读性，过犹不及。所以专注于提高项目开发效率的 CSS 框架是值得肯定的。
bulma 是相较于 Bootstrap 更轻量的框架，只是中文文档很少，可能在 CSS 框架推陈出新过程中逐渐淘汰，但在选择有限的情况下仍值得一试。

[jin5354]

@wdhwg001 实际上我不但看了官网，还因为好奇为什么 2019 还有人搞这种东西，去看了作者写的原动机 https://adamwathan.me/css-utility-classes-and-separation-of-concerns/，之后才来回复的。我很好奇你是如何揣测的，我会认为你的最后一句话是在人身攻击。

Tailwind 作者的动机就和原子类一模一样——使用语义化 css 『起类名麻烦』『抽象复用麻烦』『抽象好之后做改动麻烦』，最后得出结论『还是实用性第一的原子类好使』『视作 HTML 依附于 CSS 』。

这种实用性第一的写法肯定是有市场的，随便糊糊就能出页面就像『用什么 React/Vue，老夫用 jQuery 就够了』适用于你的剃刀律，适合快速出活。至于你说的组件类，作者文章表明了『你觉得能复用你就抽』，没有组件类先行的约束是不会提高可维护性的。官网和组件示例上满屏幕的『 w-4 h-4 mr-2 』已经表现了 Tailwind 鼓励 100% 正统的原子类用法，不用粉饰什么了。