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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2431 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

Supplement 1 · Sep 22, 2019

这篇文章不错，也是中文的：

https://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/index.html

Supplement 2 · Sep 23, 2019

上面的链接是 BEM 风格，具体是什么，请去 google

但我要个例子：vuetify

大家都说 vuetify 这个库的 css 代码非常牛逼，我以前就知道他们的 css class name 非常有规律，今天才意识到，这个就是 BEM 风格。

我要用这个风格了，我很喜欢这个风格

68 replies • 2021-06-06 23:26:48 +08:00

noe132

Sep 21, 2019

抬个杠，我用 vue 和 angular，都自带 scoped css

说实话 css module 的侵入性比 styled component 要小
但是两个我都不喜欢。我见过的 react 项目都是直接写样式用 css-loader 加载。组件内使用 namespaced classname

AnnatarHe

Sep 21, 2019

都不用，建议了解一下 [tailwindcss]( https://tailwindcss.com/)

写 css 这么多年，接触了 tailwind 才意识到正确的 css 写法是什么

Cbdy

Sep 21, 2019 via Android

styled jsx 了解一下
https://github.com/zeit/styled-jsx

noe132

Sep 21, 2019

styled jsx 唯一的缺点在于不支持 preprocessor

ChefIsAwesome

Sep 21, 2019

css 大体可以分几部分：
1.直接针对 HTML 的。像 reset，或者富文本的样式。
2.grid，gutter，margin-left-5 这种 layout 相关。或是 round-corner，box-shadow-5 这些所谓 atomic design 的样式。他们都跟具体组件没什么关系。
3.强制字号，强制文字颜色，强制隐藏，跟具体组件没什么关系，甚至是专门用来覆盖固有样式的工具类。
4.通用 UI 组件。按钮，对话框之类的。
5.没什么通用性的，具体的 UI。像页面布局之类的。

1，2，3 必须是写在全局的 css 文件里的。因为是全局的，相应的 BEM 之类的命名方法肯定是要用的。
4 写哪都行。但是要注意的是我们写任何 module，除了 close 来隔绝外界，还得 open for extension。有没有 open 的需求，怎么设计 open，看你自己的想法了。
5 没什么通用性，写在 scoped css 里或者 style 里都是比较好的选择。这里仍然可能有复用样式的需求。css 可以用 mixin，style 就是对象，拆出来直接就能复用了。

我想要做一个可以定制的组件怎么办？
看你想暴露哪些接口，提供多大的定制性。css 的接口只有俩：class，css properties。

Flands

Sep 21, 2019

react 我用 css modules
JS 入侵的写法非常不舒服
楼上那个 tailwind 简直惊艳！

love

Sep 21, 2019

css modules 用 scss 的话似乎很不方便，没法象以前的在主 index.scss 里 include 一些东西然后子文件里可以直接用了

还是建议用 styled components，用 js 管理一切才是最好的

silaike

Sep 21, 2019 via iPhone

@love 可以由 sass loader 统一引入文件的

love

Sep 21, 2019

@silaike 我用的是官方的 create-react-app，这货自己做不了太灵活的定制

VDimos

Sep 21, 2019 via Android

css module 吧，style component 写起来别扭

TheFLY

Sep 21, 2019

@AnnatarHe 这个真的很棒诶

wangxiaoaer

Sep 21, 2019 via Android

@AnnatarHe 这个东西粒度足够细吗？可以通过排列组合实现任意需求？

另外，感觉跟 bootstrap 之类有点像啊

hewelzei

Sep 21, 2019

emotion 了解一下，我觉得比 style component 好用

joshua7v

Sep 21, 2019

个人项目以前 tachyons
tailwind 出来后就用 tailwind 了

hewelzei

Sep 21, 2019

@love #9 原文：“@silaike 我用的是官方的 create-react-app，这货自己做不了太灵活的定制”
======
回复：可以用 react-app-rewired 定制一些 create-react-app 不能修改的 webpack 配置

df4VW

Sep 21, 2019

楼上几个开始推荐 css framework 的都是什么鬼？？？

jerrry

Sep 21, 2019

@AnnatarHe 太大了

connection

Sep 21, 2019

看了看 tailwind 感觉跟 tachyons 还是有点像呀。

我个人觉得如果定下来的 css 部分已经足够多了可以选择用 styled。我觉得其实 styled 修改也是有一点复杂度的。

Fortnight

Sep 21, 2019

css module + 1。第一感觉就不喜欢 style component 那种写法，于是直接用了 css module。不过有机会也会试试 style component，搞得风风火火的，应该是有它的独到之处的。

hyyou2010

Sep 21, 2019

styled-components 的好处是都在一个文件里面，看起来省事

yuthelloworld

Sep 21, 2019 via Android

jss

newdongyuwei

Sep 21, 2019

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

newdongyuwei

Sep 21, 2019

styled-jsx 看起来很不错！

Lxxyx

Sep 21, 2019

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

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

maomaomao001

Sep 21, 2019

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

bertonzh

Sep 21, 2019

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

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

bertonzh

Sep 21, 2019

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

learnshare

Sep 21, 2019

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

silaike

Sep 21, 2019 via iPhone

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

connection

Sep 21, 2019

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

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

ochatokori

Sep 21, 2019 via Android

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

Elmer

Sep 22, 2019

@AnnatarHe 感谢分享，看着不错

seki

Sep 22, 2019

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

Shook

Sep 22, 2019

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

KuroNekoFan

Sep 22, 2019

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

devtiange

Sep 22, 2019

都不用, 用 vue.

invalidtoken

Sep 22, 2019

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

ericgui

Sep 22, 2019

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

miniwade514

Sep 22, 2019

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

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

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

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

attackonFourier

Sep 22, 2019

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

zthxxx

Sep 22, 2019

@AnnatarHe
@Flands
@TheFLY
@Elmer
@joshua7v

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

duan602728596

Sep 22, 2019 via iPhone

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

TheFLY

Sep 22, 2019

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

ericgui

Sep 22, 2019

@TheFLY what ?

luoway

Sep 22, 2019

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

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

TheFLY

Sep 22, 2019

@ericgui What ？

AnnatarHe

Sep 22, 2019

@zthxxx

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

jin5354

Sep 22, 2019

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

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

dvaknheo

Sep 22, 2019

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

TristanYang

Sep 22, 2019

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

l1xnan

Sep 22, 2019 via Android

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

zthxxx

Sep 22, 2019

@AnnatarHe

是认真的

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

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

dodo2012

Sep 23, 2019

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

wdhwg001

Sep 23, 2019

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

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

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

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

wdhwg001

Sep 23, 2019

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

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

find456789

Sep 23, 2019

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

ericgui

Sep 23, 2019 via Android

@find456789 我目前就用 bulma

acthtml

Sep 23, 2019

@AnnatarHe

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

luoway

Sep 23, 2019

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

jin5354

Sep 23, 2019

@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% 正统的原子类用法，不用粉饰什么了。

jin5354

Sep 23, 2019

@jin5354 https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ 修正链接

dany813

Sep 23, 2019

@Flands 但是这个还是要学习这个语法糖啊，不习惯

hyy1995

Sep 23, 2019

前端真是喜欢玩奇奇怪怪的花样。。。css modules 就行了，楼上有人推荐的 tailwindcss 我看了下，我觉得不好维护，也不利于团队开发。。。

windyCity

Sep 23, 2019

我认为类似 tailwindcss 或者说原子类（包含基于原子类提取的通用样式），在项目中可以使用，但是，必须控制在在项目内通用性极高的样式，比如，按钮通用样式与按钮交互效果等，提交开发便捷性，但是要严格控制数量，避免造成记忆压力；

团队项目中还是要考虑众人合作的开发舒适度的，不能你认为好用就行

Flands

Sep 23, 2019

确实没接触到过原子类这种写法。
惊艳是因为 ‘组合‘ 写出 CSS，这种 ‘一个样式就是一个类’ 的写法很少做，工作项目大部分都是几个样式合并成一个类，然后在项目中复用。
个人感觉这些不矛盾，项目中可以少量原子类以达到复用的目的。只要命名一眼能看懂，`font-size-16`这种。

Sapp

Sep 30, 2019

我现在都是这么写的

<span css={(ds) => ({...flexCenter(),width: 50, color: ds.color.primary)}>你瞅瞅</span>

charlie21

Nov 5, 2020

component-friendly 本来就是表象组件复用都是表象，html-friendly 本来就是表象，如果你只看表象，那么诶你会感觉很不适应，让你感觉不适应的东西会有很多。真正重要的问题是什么？是你关注的是什么。如果你关注的是对于状态的抽象，对于状态的抽象、对于状态的控制、对于状态的精准控制，那么你的日子会好过很多

chenjiangui998

Jun 6, 2021

还是 Vue 和 angular 舒服, react 想搞个 CSS 样式隔离都要搞一堆方案还都不完美