V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
johnfrank
V2EX  ›  Node.js

2024 年了, 现在 REACT 的 CSS 的正确姿势是什么?

  •  
  •   johnfrank · 121 天前 · 5465 次点击
    这是一个创建于 121 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    第 1 条附言  ·  116 天前
    最后研究了一圈,还是觉得用 module sass 比较符合自己的习惯。
    62 条回复    2024-08-29 15:37:00 +08:00
    gary907478
        1
    gary907478  
       121 天前
    react 我个人用 tailwind 。但是实际上无所谓,自己的项目,你怎么舒服怎么来。
    BeijingBaby
        2
    BeijingBaby  
       121 天前
    现在主流 tailwind 吧,不喜欢也可以变喜欢。
    enchilada2020
        3
    enchilada2020  
       121 天前 via Android
    同不喜欢 tailwind 和 css in js…
    tcper
        4
    tcper  
       121 天前
    用来用去,tailwind 是终点
    zedhugh
        5
    zedhugh  
       121 天前
    同不喜欢 css in js ,非常不喜欢,我比较喜欢用 CSS module
    lee88688
        6
    lee88688  
       121 天前
    css in js 设计不好有很大的性能问题,隔壁的 antd5 就是这么的😂。我自己 tailwind 、css module 、传统的手搓 css 都可以,没啥偏好。tailwind 好就好在快,但是维护确实是个大问题。
    murmur
        7
    murmur  
       121 天前
    就普通鞋 css 就可以,tailwind 太没有工业化的感觉了,写回 bootstrap 那个年代了
    zthxxx
        8
    zthxxx  
       121 天前
    我个人主力是 CSS Variables + styled-components (emotion)

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

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



    zthxxx
        9
    zthxxx  
       121 天前
    #8 第二张图图挂了重发了下试试

    estk
        10
    estk  
       121 天前 via iPhone
    Tailwind 一开始不熟练,用几次后就不再喜欢 css 了
    douxc
        11
    douxc  
       121 天前
    unocss + UI 框架;大部分样式 UI 框架都处理好了,用 unocss 稍微调整 margin 、padding 也就没啥了
    jackge0323
        12
    jackge0323  
       121 天前
    自己有 css 架构能力,用 module+sass 自己写也行,没有的话还是用比较成熟的方案。
    wetyq
        13
    wetyq  
       121 天前
    公司项目:老板要求用啥就用啥
    个人项目:那个用着舒服用那个
    Cbdy
        14
    Cbdy  
       121 天前
    emotion
    lsk569937453
        15
    lsk569937453  
       121 天前
    已经变成 tainwind 的模样了
    kongkx
        16
    kongkx  
       121 天前 via iPhone
    sass 跟 tailwind 一起用, 主题变量在 tailwind 上设置, 通过 tailwind 插件生成对应的 variable.scss 给 sass 使用。
    yhxx
        17
    yhxx  
       121 天前   ❤️ 3
    不喜欢 tailwind+1
    明明只是一部分人的狂欢,不知道为什么要宣传成“主流是 tailwind”
    如果也不喜欢 emotion 之类的方案,可以考虑还是用 less 、sass 这种,很容易理解,维护也很方便
    qingshui33
        18
    qingshui33  
       121 天前
    之前我也把各种 CSS 的编写位置都尝试了一遍,感觉没有哪一种让我感到很丝滑,就只论 css 编写位置这快,我个人站 Vue ,所以问题来了,有没有大哥研究过怎么在 React 的组件中写一个 style 标签用来编写样式的方法?
    xu33
        19
    xu33  
       121 天前
    @qingshui33 你可以用 styled-components 的 globalStyle ,在你的组件局部引用来达成这个效果
    bojackhorseman
        20
    bojackhorseman  
       121 天前
    抱歉我用 unocss
    wunonglin
        21
    wunonglin  
       121 天前
    tailwind +1
    vsitebon
        22
    vsitebon  
       121 天前
    个人项目用 Tailwind ,公司项目 unocss
    Hilalum
        23
    Hilalum  
       121 天前
    styled-components 做过国外大公司项目,就是用这个
    qingshui33
        24
    qingshui33  
       121 天前
    @xu33 好的,感谢,我去研究下看看
    changwei
        25
    changwei  
       121 天前
    @lee88688 antd5 确实用起来卡卡的,感觉明显没有其他的 React UI 组件快,但是这确定是 css-in-js 导致的的问题吗?另外有点好奇 tailwind 维护有什么问题嘛?我目前只在公司项目小范围用过 tailwind 所以还没发现什么坑,不知道深度使用后可能会有哪些问题呢?
    nulIptr
        26
    nulIptr  
       121 天前
    你们说用 tailwind 的,是怎么实现设计稿效果的?还是说 ui 就是按照 tailwind 风格来的?
    johnfrank
        27
    johnfrank  
    OP
       121 天前
    @zthxxx 因为个人项目吗,维护一次都是按月起步。就是想以后看代码的时候方便点。

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

    现在有什么库搞这种 classname 简单一点呢?
    jsx 可以把 css ( sass )写在一个 jsx 文件里面吗?
    me1onsoda
        28
    me1onsoda  
       121 天前
    @nulIptr tailwind 不就是个原生 css 的语法糖吗?编译器帮你还原成原生 css ,你该不会说的是 tailwind 那些 component 、templates ?
    johnfrank
        29
    johnfrank  
    OP
       121 天前
    @murmur 对,最开始写的网页的时候就是 sass+bootstrap ,那时候还是后端渲染,python2 + jinja2 做内部应用。ajax+jquery 。
    wunonglin
        30
    wunonglin  
       121 天前
    @nulIptr #26 tailwind 也可以自定义啊。按你设计稿子定不就好了
    abelmakihara
        31
    abelmakihara  
       121 天前
    就普通的 scss nextjs 用 CSS module
    不喜欢 tailwind
    xu33
        32
    xu33  
       121 天前
    @qingshui33 不好意思刚才好像搞错了,你这个需求,就用 styled-components 实现最外层的标签,然后内部还是按照传统 css 或者 sass 的写法即可,这样的话外层通过 hash 保持一个 scope ,内层的类名等被这个 scope 限制,这样应该是相对接近 vue 那个
    enchilada2020
        33
    enchilada2020  
       121 天前 via Android
    @abelmakihara +1 scss 的嵌套语法 + css module 就好了 方便又直观
    retrocode
        34
    retrocode  
       121 天前
    介绍我的库,我也是不喜欢 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
        35
    Dyon  
       121 天前
    tailwind / module css
    ruyan2013
        36
    ruyan2013  
       121 天前   ❤️ 2
    感觉目前最佳方案是 styled-component+tailwind ,兼具灵活性与好的维护性(指代码整洁以及后期修改)

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

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

    这样编写速度最快,也不会产生 tailwind 一堆看着眼花的样式名
    banricho
        37
    banricho  
       121 天前
    @retrocode
    觉得长可以用 @apply
    banricho
        38
    banricho  
       121 天前   ❤️ 2
    我怎么感觉在混淆概念呢
    styled-component
    sass / postcss
    css modules / bem
    tailwind css

    又不是不能一起用………
    发现好多人对 tailwind 有偏见啊,又不是非得在 html 里面堆 class names ,你可以在 css 里面使用 @apply
    而且可以很方便的自定义或者引入扩展,用于处理全面屏 safe area ,或各种基于 class name 方案的 icon 库
    retrocode
        39
    retrocode  
       121 天前
    @banricho 主要是侵入性, 已有项目引入 Tailwindcss 加上一堆配置会提高项目混乱度, 项目引入新依赖得找组长讨论, 但是引入新 css 不用. 至于 @apply 其实用处不大, @apply 主要是用来配置通用样式的, 但现在组件化后绝大多数 class 样式其实并不相似很难提取通用或者没意义,配来配去最后又回到 className 那一套了,
    johnfrank
        40
    johnfrank  
    OP
       121 天前
    @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
        41
    sjhhjx0122  
       121 天前
    当有什么适老化,主题化的时候 styled component 真的很香
    sjhhjx0122
        42
    sjhhjx0122  
       121 天前
    @johnfrank 用 clsx 之类的包一下
    retrocode
        43
    retrocode  
       121 天前
    @johnfrank #40 我在 vue 中一般是 v-if 或者干脆 {specification:'A'}[specification]解决, 或第三方组件会有 getRowClassName 之类的回调函数, 这部分操作属于框架层了具体看框架, 库本身只是解决 css 问题
    nulIptr
        44
    nulIptr  
       121 天前
    @wunonglin #30 我理解用 tailwind 提供了一大堆内置的 class 样式,然后只要在 html/模板/jsx 里面写 class 就可以了
    但是我试了一下发现内置样式都是 w-24 h-24 text-lg 这种,然后设计稿又不是这个尺寸,然后就会写出大量的 h-[28px]这种硬编码的长度。感觉很难受。
    不涉及到大小的时候,比如 flex 相关的那些 class 名字还是很好用的。
    ixixi
        45
    ixixi  
       121 天前
    简单的 三四个属性内用 tailwind ; 非常复杂的 就写到 less 文件内

    tailwind 找到感觉后还是非常好用的
    SeeYouNextTime
        46
    SeeYouNextTime  
       121 天前
    tw 好用的一批。公共样式 apply 一下就行了。出活快才是关键。
    qingshui33
        47
    qingshui33  
       121 天前
    @xu33 #32 好的,感谢指点
    ruoxie
        48
    ruoxie  
       121 天前
    不喜欢 css in js ,非常不喜欢,喜欢用 CSS module
    wunonglin
        49
    wunonglin  
       121 天前
    @nulIptr #44 用你所需的就行。额外的自己写 css 就好了,tailwind 也支持 @apply
    zhlssg
        50
    zhlssg  
       121 天前
    重构的时候就知道 tailwind 香了
    aliyun2017
        51
    aliyun2017  
       121 天前
    ```
    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
        52
    zbowen66  
       121 天前
    Tailwind 不用起名啊,这还不香?
    wobuhuicode
        53
    wobuhuicode  
       121 天前
    有设计师就自己写 CSS
    没有设计师就用 tailwind CSS
    yuyu168
        54
    yuyu168  
       121 天前
    @Hilalum 这种巨坑
    Jaosn
        55
    Jaosn  
       121 天前
    说 Tailwind 不好维护的绷不住了,我想说 less scss 这种才不好维护好吗,特别是 2C 项目,命名、写法、嵌套,后续迭代,真的爆炸
    crocoBaby
        56
    crocoBaby  
       120 天前
    我觉得 tailwind 不用想类名对我太友好了
    realJamespond
        57
    realJamespond  
       120 天前
    sass + react-jss + antd 还行
    lee88688
        58
    lee88688  
       119 天前
    @changwei 之前跟一个社区的项目提 PR 的时候发现 antd 的一个 theme 会在每次使用 useTheme 时候浅拷贝,这个还算正常操作,但是调试的时候看了一眼这个对象里面有接近 8000 个属性🤣。devtools 看了一下耗时,有大约 30%时间在复制这个对象,我当时就纳闷为什么要塞这么多东西进去。我觉得 tailwind 的问题在于 css 语义话被干掉了,在 class 太多之后调试的时候复杂度有点增大,我也是业余项目用也没有体验出什么特别大的缺点。
    zthxxx
        59
    zthxxx  
       118 天前
    @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
        60
    johnfrank  
    OP
       116 天前
    最后研究了一圈,还是觉得用 module sass 比较符合自己的习惯。
    ARIInV2
        61
    ARIInV2  
       113 天前
    还是有 CSS module
    xiaoyureed
        62
    xiaoyureed  
       65 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   988 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:18 · PVG 04:18 · LAX 13:18 · JFK 16:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.