楼主不是搞前端开发的，偶尔写过一些前端程序。最近要做个自用的小项目。
3-4 年前写的 vue2 ，还是 class component ，在.vue里面写 sass ，然后手动判断给 div 加不同 class name 。
最近看一些 react 都在用什么css-in-js，感觉很乱，没太看懂，怎么像 sass 一样 import 公用样式和使用其他 css Framework 的变量。
所有请教下大家现在 react 下 css 都用什么？
PS 。个人不是很喜欢Tailwind CSS这种。
 |
1
gary907478 Jul 4, 2024
react 我个人用 tailwind 。但是实际上无所谓，自己的项目，你怎么舒服怎么来。
|
 |
2
BeijingBaby Jul 4, 2024
现在主流 tailwind 吧，不喜欢也可以变喜欢。
|
 |
3
KMpAn8Obw1QhPoEP Jul 4, 2024 via Android
同不喜欢 tailwind 和 css in js…
|
 |
4
tcper Jul 4, 2024
用来用去，tailwind 是终点
|
 |
5
zedhugh Jul 4, 2024
同不喜欢 css in js ，非常不喜欢，我比较喜欢用 CSS module
|
 |
6
lee88688 Jul 4, 2024
css in js 设计不好有很大的性能问题，隔壁的 antd5 就是这么的😂。我自己 tailwind 、css module 、传统的手搓 css 都可以，没啥偏好。tailwind 好就好在快，但是维护确实是个大问题。
|
 |
7
murmur Jul 4, 2024
就普通鞋 css 就可以，tailwind 太没有工业化的感觉了，写回 bootstrap 那个年代了
|
 |
8
zthxxx Jul 4, 2024
我个人主力是 CSS Variables + styled-components (emotion)
其中 styled-components 是指这一类 css-in-js 的写法范式，并不单指一个库， 用于语义化组件、做开发 / review 代码的时候 更关心组件结构不关心样式 而内部具体样式的实现可以是写 CSS / Less / Sass / 甚至 Tailwindcss (对，tailwind 只是生成 css 的一种方式)   |
|
9
zthxxx Jul 4, 2024
#8 第二张图图挂了重发了下试试
 |
 |
10
estk Jul 4, 2024 via iPhone
Tailwind 一开始不熟练，用几次后就不再喜欢 css 了
|
 |
11
douxc Jul 4, 2024
unocss + UI 框架;大部分样式 UI 框架都处理好了，用 unocss 稍微调整 margin 、padding 也就没啥了
|
 |
12
jackge0323 Jul 4, 2024
自己有 css 架构能力，用 module+sass 自己写也行，没有的话还是用比较成熟的方案。
|
 |
13
wetyq Jul 4, 2024
公司项目：老板要求用啥就用啥
个人项目：那个用着舒服用那个 |
 |
14
Cbdy Jul 4, 2024
emotion
|
 |
15
lsk569937453 Jul 4, 2024
已经变成 tainwind 的模样了
|
 |
16
kongkx Jul 4, 2024 via iPhone
sass 跟 tailwind 一起用， 主题变量在 tailwind 上设置， 通过 tailwind 插件生成对应的 variable.scss 给 sass 使用。
|
 |
17
yhxx Jul 4, 2024  3
不喜欢 tailwind+1
明明只是一部分人的狂欢，不知道为什么要宣传成“主流是 tailwind” 如果也不喜欢 emotion 之类的方案，可以考虑还是用 less 、sass 这种，很容易理解，维护也很方便 |
 |
18
qingshui33 Jul 4, 2024
之前我也把各种 CSS 的编写位置都尝试了一遍，感觉没有哪一种让我感到很丝滑，就只论 css 编写位置这快，我个人站 Vue ，所以问题来了，有没有大哥研究过怎么在 React 的组件中写一个 style 标签用来编写样式的方法？
|
 |
19
xu33 Jul 4, 2024
@qingshui33 你可以用 styled-components 的 globalStyle ，在你的组件局部引用来达成这个效果
|
 |
20
dumbass Jul 4, 2024
抱歉我用 unocss
|
 |
21
shakaraka PRO tailwind +1
|
 |
22
vsitebon Jul 4, 2024
个人项目用 Tailwind ，公司项目 unocss
|
 |
23
Hilalum Jul 4, 2024
styled-components 做过国外大公司项目，就是用这个
|
|
24
qingshui33 Jul 4, 2024
@xu33 好的，感谢，我去研究下看看
|
 |
25
changwei Jul 4, 2024
@lee88688 antd5 确实用起来卡卡的，感觉明显没有其他的 React UI 组件快，但是这确定是 css-in-js 导致的的问题吗？另外有点好奇 tailwind 维护有什么问题嘛？我目前只在公司项目小范围用过 tailwind 所以还没发现什么坑，不知道深度使用后可能会有哪些问题呢？
|
 |
26
nulIptr Jul 4, 2024
你们说用 tailwind 的，是怎么实现设计稿效果的？还是说 ui 就是按照 tailwind 风格来的？
|
 |
27
johnfrank OP @zthxxx 因为个人项目吗，维护一次都是按月起步。就是想以后看代码的时候方便点。
以前 VUE 是可以把 html ，js ，css 写在一个文件里面。麻烦的地方就是 component classname 的选择，比如什么 active ，hot 之类的。 现在有什么库搞这种 classname 简单一点呢？ jsx 可以把 css （ sass ）写在一个 jsx 文件里面吗？ |
 |
28
me1onsoda Jul 4, 2024
@nulIptr tailwind 不就是个原生 css 的语法糖吗？编译器帮你还原成原生 css ，你该不会说的是 tailwind 那些 component 、templates ？
|
|
29
johnfrank OP @murmur 对，最开始写的网页的时候就是 sass+bootstrap ，那时候还是后端渲染，python2 + jinja2 做内部应用。ajax+jquery 。
|
 |
31
abelmakihara Jul 4, 2024
就普通的 scss nextjs 用 CSS module
不喜欢 tailwind |
|
32
xu33 Jul 4, 2024
@qingshui33 不好意思刚才好像搞错了，你这个需求，就用 styled-components 实现最外层的标签，然后内部还是按照传统 css 或者 sass 的写法即可，这样的话外层通过 hash 保持一个 scope ，内层的类名等被这个 scope 限制，这样应该是相对接近 vue 那个
|
|
33
KMpAn8Obw1QhPoEP Jul 4, 2024 via Android
@abelmakihara +1 scss 的嵌套语法 + css module 就好了 方便又直观
|
 |
34
cvooc Jul 4, 2024
介绍我的库,我也是不喜欢 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> ``` |
 |
35
Dyon Jul 4, 2024
tailwind / module css
|
 |
36
ruyan2013 Jul 4, 2024 3
感觉目前最佳方案是 styled-component+tailwind ，兼具灵活性与好的维护性（指代码整洁以及后期修改）
大部分 CSS 方案都在大型工程用过，抛开组件库这种特殊的不讨论，日常偏界面的基本上这种用起来体验最佳： 1. styled-component 用作较多样式组件的样式编写 2. tailwind 补充解决少量样式的组件 这样编写速度最快，也不会产生 tailwind 一堆看着眼花的样式名 |
 |
38
banricho Jul 4, 2024 2
我怎么感觉在混淆概念呢
styled-component sass / postcss css modules / bem tailwind css 又不是不能一起用……… 发现好多人对 tailwind 有偏见啊，又不是非得在 html 里面堆 class names ，你可以在 css 里面使用 @apply 而且可以很方便的自定义或者引入扩展，用于处理全面屏 safe area ，或各种基于 class name 方案的 icon 库 |
|
39
cvooc Jul 4, 2024
|
|
40
johnfrank OP @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 背景是黑色... |
 |
41
linkopeneyes Jul 4, 2024
当有什么适老化,主题化的时候 styled component 真的很香
|
|
42
linkopeneyes Jul 4, 2024
@johnfrank 用 clsx 之类的包一下
|
|
43
cvooc Jul 4, 2024
@johnfrank #40 我在 vue 中一般是 v-if 或者干脆 {specification:'A'}[specification]解决, 或第三方组件会有 getRowClassName 之类的回调函数, 这部分操作属于框架层了具体看框架, 库本身只是解决 css 问题
|
|
44
nulIptr Jul 4, 2024
@wunonglin #30 我理解用 tailwind 提供了一大堆内置的 class 样式，然后只要在 html/模板/jsx 里面写 class 就可以了
但是我试了一下发现内置样式都是 w-24 h-24 text-lg 这种，然后设计稿又不是这个尺寸，然后就会写出大量的 h-[28px]这种硬编码的长度。感觉很难受。 不涉及到大小的时候，比如 flex 相关的那些 class 名字还是很好用的。 |
 |
45
ixixi Jul 4, 2024
简单的 三四个属性内用 tailwind ; 非常复杂的 就写到 less 文件内
tailwind 找到感觉后还是非常好用的 |
 |
46
6NCQWh99X46kZv6x Jul 4, 2024
tw 好用的一批。公共样式 apply 一下就行了。出活快才是关键。
|
|
47
qingshui33 Jul 4, 2024
@xu33 #32 好的，感谢指点
|
 |
48
ruoxie Jul 4, 2024
不喜欢 css in js ，非常不喜欢，喜欢用 CSS module
|
 |
50
zhlssg Jul 4, 2024
重构的时候就知道 tailwind 香了
|
 |
51
aliyun2017 Jul 4, 2024
```
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"); }, }, }); ``` |
 |
52
zbowen66 Jul 4, 2024
Tailwind 不用起名啊，这还不香？
|
 |
53
wobuhuicode Jul 4, 2024
有设计师就自己写 CSS
没有设计师就用 tailwind CSS |
 |
55
Jaosn Jul 4, 2024
说 Tailwind 不好维护的绷不住了，我想说 less scss 这种才不好维护好吗，特别是 2C 项目，命名、写法、嵌套，后续迭代，真的爆炸
|
 |
56
crocoBaby Jul 5, 2024
我觉得 tailwind 不用想类名对我太友好了
|
 |
57
realJamespond Jul 5, 2024
sass + react-jss + antd 还行
|
|
58
lee88688 Jul 6, 2024
@changwei 之前跟一个社区的项目提 PR 的时候发现 antd 的一个 theme 会在每次使用 useTheme 时候浅拷贝，这个还算正常操作，但是调试的时候看了一眼这个对象里面有接近 8000 个属性🤣。devtools 看了一下耗时，有大约 30%时间在复制这个对象，我当时就纳闷为什么要塞这么多东西进去。我觉得 tailwind 的问题在于 css 语义话被干掉了，在 class 太多之后调试的时候复杂度有点增大，我也是业余项目用也没有体验出什么特别大的缺点。
|
|
59
zthxxx Jul 7, 2024
@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 范畴内 |
|
60
johnfrank OP 最后研究了一圈，还是觉得用 module sass 比较符合自己的习惯。
|
 |
61
ARIInV2 Jul 12, 2024
还是有 CSS module
|
 |
62
xiaoyureed Aug 29, 2024
|
Select Language