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这种。

[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 背景是黑色...