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