2024 年了， 现在 REACT 的 CSS 的正确姿势是什么？

[johnfrank]

楼主不是搞前端开发的，偶尔写过一些前端程序。最近要做个自用的小项目。

3-4 年前写的 vue2 ，还是 class component ，在.vue里面写 sass ，然后手动判断给 div 加不同 class name 。

最近看一些 react 都在用什么css-in-js，感觉很乱，没太看懂，怎么像 sass 一样 import 公用样式和使用其他 css Framework 的变量。

所有请教下大家现在 react 下 css 都用什么？

PS 。个人不是很喜欢Tailwind CSS这种。

最后研究了一圈，还是觉得用 module sass 比较符合自己的习惯。

[gary907478]

react 我个人用 tailwind 。但是实际上无所谓，自己的项目，你怎么舒服怎么来。

[BeijingBaby]

现在主流 tailwind 吧，不喜欢也可以变喜欢。

[enchilada2020]

同不喜欢 tailwind 和 css in js…

[tcper]

用来用去，tailwind 是终点

[zedhugh]

同不喜欢 css in js ，非常不喜欢，我比较喜欢用 CSS module

[lee88688]

css in js 设计不好有很大的性能问题，隔壁的 antd5 就是这么的😂。我自己 tailwind 、css module 、传统的手搓 css 都可以，没啥偏好。tailwind 好就好在快，但是维护确实是个大问题。

[murmur]

就普通鞋 css 就可以，tailwind 太没有工业化的感觉了，写回 bootstrap 那个年代了

[zthxxx]

我个人主力是 CSS Variables + styled-components (emotion)

其中 styled-components 是指这一类 css-in-js 的写法范式，并不单指一个库，
用于语义化组件、做开发 / review 代码的时候 更关心组件结构不关心样式

而内部具体样式的实现可以是写 CSS / Less / Sass / 甚至 Tailwindcss (对，tailwind 只是生成 css 的一种方式)

[zthxxx]

#8 第二张图图挂了重发了下试试

[estk]

Tailwind 一开始不熟练，用几次后就不再喜欢 css 了

[douxc]

unocss + UI 框架;大部分样式 UI 框架都处理好了，用 unocss 稍微调整 margin 、padding 也就没啥了

[jackge0323]

自己有 css 架构能力，用 module+sass 自己写也行，没有的话还是用比较成熟的方案。

[wetyq]

公司项目：老板要求用啥就用啥
个人项目：那个用着舒服用那个

[Cbdy]

emotion

[lsk569937453]

已经变成 tainwind 的模样了

[kongkx]

sass 跟 tailwind 一起用， 主题变量在 tailwind 上设置， 通过 tailwind 插件生成对应的 variable.scss 给 sass 使用。

[yhxx]

不喜欢 tailwind+1
明明只是一部分人的狂欢，不知道为什么要宣传成“主流是 tailwind”
如果也不喜欢 emotion 之类的方案，可以考虑还是用 less 、sass 这种，很容易理解，维护也很方便

[qingshui33]

之前我也把各种 CSS 的编写位置都尝试了一遍，感觉没有哪一种让我感到很丝滑，就只论 css 编写位置这快，我个人站 Vue ，所以问题来了，有没有大哥研究过怎么在 React 的组件中写一个 style 标签用来编写样式的方法？

[xu33]

@qingshui33 你可以用 styled-components 的 globalStyle ，在你的组件局部引用来达成这个效果

[bojackhorseman]

抱歉我用 unocss

[wunonglin]

tailwind +1

[vsitebon]

个人项目用 Tailwind ，公司项目 unocss

[Hilalum]

styled-components 做过国外大公司项目，就是用这个

[qingshui33]

@xu33 好的，感谢，我去研究下看看

[changwei]

@lee88688 antd5 确实用起来卡卡的，感觉明显没有其他的 React UI 组件快，但是这确定是 css-in-js 导致的的问题吗？另外有点好奇 tailwind 维护有什么问题嘛？我目前只在公司项目小范围用过 tailwind 所以还没发现什么坑，不知道深度使用后可能会有哪些问题呢？

[nulIptr]

你们说用 tailwind 的，是怎么实现设计稿效果的？还是说 ui 就是按照 tailwind 风格来的？

[johnfrank]

@zthxxx 因为个人项目吗，维护一次都是按月起步。就是想以后看代码的时候方便点。

以前 VUE 是可以把 html ，js ，css 写在一个文件里面。麻烦的地方就是 component classname 的选择，比如什么 active ，hot 之类的。

现在有什么库搞这种 classname 简单一点呢？
jsx 可以把 css （ sass ）写在一个 jsx 文件里面吗？

[me1onsoda]

@nulIptr tailwind 不就是个原生 css 的语法糖吗？编译器帮你还原成原生 css ，你该不会说的是 tailwind 那些 component 、templates ？

[johnfrank]

@murmur 对，最开始写的网页的时候就是 sass+bootstrap ，那时候还是后端渲染，python2 + jinja2 做内部应用。ajax+jquery 。

[wunonglin]

@nulIptr #26 tailwind 也可以自定义啊。按你设计稿子定不就好了

[abelmakihara]

就普通的 scss nextjs 用 CSS module
不喜欢 tailwind

[xu33]

@qingshui33 不好意思刚才好像搞错了，你这个需求，就用 styled-components 实现最外层的标签，然后内部还是按照传统 css 或者 sass 的写法即可，这样的话外层通过 hash 保持一个 scope ，内层的类名等被这个 scope 限制，这样应该是相对接近 vue 那个

[enchilada2020]

@abelmakihara +1 scss 的嵌套语法 + css module 就好了 方便又直观

[retrocode]

介绍我的库,我也是不喜欢 Tailwind, 侵入性太强了, 加上写多了 class 是真的长, 同时这种写法真的爽, 我用纯 sass 写了个缩写库, 非侵入性, 甚至不需要使用 sass 特殊情况下可以构建出 css 直接使用, 大概 37K 左右, gzip 后大小可忽略不计. 兼容任何框架(因为是纯 sass), 使用时把项目源码复制一份进去, 按需扩展即可

[https://github.com/ShowMeBaby/tailwind-scss-mixin]( https://github.com/ShowMeBaby/tailwind-scss-mixin)

编写完大概是这种效果
```html
<view class="bg-white px-15 py-5">
<view class="py-5 bb">
<view class="flex-row">
<view class="bg-green w-10 h-10 br-c mr-20"></view>
<text class="grow t-l fs-16">{{ good.goodsName }}</text>
</view>
<text class="grow t-l fs-14 c-gray">条码：{{ good.goodsBarcode }} {{ good.specification }}</text>
</view>
<view class="flex-row space py-5">
<text class="w-200 c-gray fs-14">商品代码</text>
<text class="grow t-r fs-14">{{ good.goodsCode }}</text>
</view>
<view class="flex-row space py-5">
<text class="w-200 c-gray fs-14">规格</text>
<text class="grow t-r fs-14">{{ good.specification }}</text>
</view>
</view>
```

[Dyon]

tailwind / module css

[ruyan2013]

感觉目前最佳方案是 styled-component+tailwind ，兼具灵活性与好的维护性（指代码整洁以及后期修改）

大部分 CSS 方案都在大型工程用过，抛开组件库这种特殊的不讨论，日常偏界面的基本上这种用起来体验最佳：

1. styled-component 用作较多样式组件的样式编写
2. tailwind 补充解决少量样式的组件

这样编写速度最快，也不会产生 tailwind 一堆看着眼花的样式名

[banricho]

@retrocode
觉得长可以用 @apply 啊

[banricho]

我怎么感觉在混淆概念呢
styled-component
sass / postcss
css modules / bem
tailwind css

又不是不能一起用………
发现好多人对 tailwind 有偏见啊，又不是非得在 html 里面堆 class names ，你可以在 css 里面使用 @apply
而且可以很方便的自定义或者引入扩展，用于处理全面屏 safe area ，或各种基于 class name 方案的 icon 库

[retrocode]

@banricho 主要是侵入性, 已有项目引入 Tailwindcss 加上一堆配置会提高项目混乱度, 项目引入新依赖得找组长讨论, 但是引入新 css 不用. 至于 @apply 其实用处不大, @apply 主要是用来配置通用样式的, 但现在组件化后绝大多数 class 样式其实并不相似很难提取通用或者没意义,配来配去最后又回到 className 那一套了,

[johnfrank]

@retrocode 特殊情况高亮或者变颜色要如何解决呢。

举个例子

```
<text class="w-200 c-gray fs-14">规格</text>
<text class="grow t-r fs-14">{{ good.specification }}</text>
```

如果我想`good.specification` = A 是蓝色，B 是红色，X 背景是黑色...

[sjhhjx0122]

当有什么适老化,主题化的时候 styled component 真的很香

[sjhhjx0122]

@johnfrank 用 clsx 之类的包一下

[retrocode]

@johnfrank #40 我在 vue 中一般是 v-if 或者干脆 {specification:'A'}[specification]解决, 或第三方组件会有 getRowClassName 之类的回调函数, 这部分操作属于框架层了具体看框架, 库本身只是解决 css 问题

[nulIptr]

@wunonglin #30 我理解用 tailwind 提供了一大堆内置的 class 样式，然后只要在 html/模板/jsx 里面写 class 就可以了
但是我试了一下发现内置样式都是 w-24 h-24 text-lg 这种，然后设计稿又不是这个尺寸，然后就会写出大量的 h-[28px]这种硬编码的长度。感觉很难受。
不涉及到大小的时候，比如 flex 相关的那些 class 名字还是很好用的。

[ixixi]

简单的 三四个属性内用 tailwind ; 非常复杂的 就写到 less 文件内

tailwind 找到感觉后还是非常好用的

[SeeYouNextTime]

tw 好用的一批。公共样式 apply 一下就行了。出活快才是关键。

[qingshui33]

@xu33 #32 好的，感谢指点

[ruoxie]

不喜欢 css in js ，非常不喜欢，喜欢用 CSS module

[wunonglin]

@nulIptr #44 用你所需的就行。额外的自己写 css 就好了，tailwind 也支持 @apply

[zhlssg]

重构的时候就知道 tailwind 香了

[aliyun2017]

```
const submitBtn = Spark.Fixed({
style: {
width: "50px",
height: "50px",
bottom: "20px",
right: "20px",
background: "url(./assets/icon-submit.svg) no-repeat",
backgroundSize: "100% 100%;",
},
shover: { transform: "scale(1.2)" },
on: {
click() {
Spark.router.push("/submitCode");
},
},
});
```

[zbowen66]

Tailwind 不用起名啊，这还不香？

[wobuhuicode]

有设计师就自己写 CSS
没有设计师就用 tailwind CSS

[yuyu168]

@Hilalum 这种巨坑

[Jaosn]

说 Tailwind 不好维护的绷不住了，我想说 less scss 这种才不好维护好吗，特别是 2C 项目，命名、写法、嵌套，后续迭代，真的爆炸

[crocoBaby]

我觉得 tailwind 不用想类名对我太友好了

[realJamespond]

sass + react-jss + antd 还行

[lee88688]

@changwei 之前跟一个社区的项目提 PR 的时候发现 antd 的一个 theme 会在每次使用 useTheme 时候浅拷贝，这个还算正常操作，但是调试的时候看了一眼这个对象里面有接近 8000 个属性🤣。devtools 看了一下耗时，有大约 30%时间在复制这个对象，我当时就纳闷为什么要塞这么多东西进去。我觉得 tailwind 的问题在于 css 语义话被干掉了，在 class 太多之后调试的时候复杂度有点增大，我也是业余项目用也没有体验出什么特别大的缺点。

[zthxxx]

@banricho #38 是啊，大部分说的都有不同程度混淆概念和维度，

- styled-components 是「定义组件的方式」、是语义化拆分组件的写法形式
- Sass / Less / tailwind (包括 classname 和 @apply) 都是「编译生成 CSS 的方式」，只是提供的语法不同
- import *.css (包括 module.css) 和 css`...` (及其各种语法糖) 是工程化打包后「注入 CSS 的不同方式」

这三个维度是可以互相组合、也可以单独用其一的，
比如你可以
- 在 styled-components 写法中，直接写 tailwind class 然后编译生成 CSS 被自动注入(或者 no-inject 手动注入)
- 在 styled-components 写法中，直接写 less 的同时在里面写 @apply tailwind class 然后编译后注入
- 直接写 [.module].(less|sass|css) 文件，import 后写到组件 classname 上，当然同样的，样式文件里可以写 less/sass/css/tailwind 语法(指各类 at-rules)

这里的编译器都是 postcss + 各种东西

至于直接写 style={{...}} 的，那是真的 js 写 inline-style 不在以上 CSS 范畴内

[johnfrank]

最后研究了一圈，还是觉得用 module sass 比较符合自己的习惯。

[ARIInV2]

还是有 CSS module

[xiaoyureed]

@qingshui33 https://github.com/vercel/styled-jsx 也许是你要的