2024 年了，现在 REACT 中使用 CSS 的 Nodejs 相关正确姿势是什么？

gougou168 1楼•2 天前

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

yuanlaile 2楼•2 天前

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

wuwangju 3楼•2 天前

同不喜欢 tailwind 和 css in js…

phonegap100 4楼•2 天前

用来用去，tailwind 是终点

yibo5220 5楼•2 天前

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

ionicwang 6楼•2 天前

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

itying888 7楼•2 天前作者

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

vueper 8楼•2 天前

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

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

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

itying888 9楼•2 天前作者

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

itying888 10楼•2 天前作者

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

htzhanglong 11楼•2 天前

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

eggper 12楼•2 天前

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

caililin 13楼•2 天前

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

zlyuanteng 14楼•2 天前

emotion

nodeper 15楼•2 天前

已经变成 tainwind 的模样了

eggper 16楼•2 天前

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

yuanlaile 17楼•2 天前

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

nodeper 18楼•2 天前

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

h691938207 19楼•2 天前

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

yibo5220 20楼•2 天前

抱歉我用 unocss

vueper 21楼•2 天前

tailwind +1

yuanlaile 22楼•2 天前

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

vueper 23楼•2 天前

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

yuanlaile 24楼•2 天前

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

ionicwang 25楼•2 天前

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

zlyuanteng 26楼•2 天前

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

yibo5220 27楼•2 天前

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

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

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

htzhanglong 28楼•2 天前

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

vueper 29楼•2 天前

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

yuanlaile 30楼•2 天前

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

ionicwang 31楼•2 天前

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

wuwangju 32楼•2 天前

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

caililin 33楼•2 天前

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

itying888 34楼•2 天前作者

介绍我的库,我也是不喜欢 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>

bupafengyu 35楼•2 天前

tailwind / module css

gougou168 36楼•2 天前

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

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

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

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

phonegap100 37楼•2 天前

觉得长可以用啊

sinazl 38楼•2 天前

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

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

yuanlaile 39楼•2 天前

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

ionicwang 40楼•2 天前

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

举个例子

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

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

htzhanglong 41楼•2 天前

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

yibo5220 42楼•2 天前

用 clsx 之类的包一下

gougou168 43楼•2 天前

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

yuanlaile 44楼•2 天前

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

vueper 45楼•2 天前

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

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

songsunli 46楼•2 天前

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

bupafengyu 47楼•2 天前

#32 好的，感谢指点

sinazl 48楼•2 天前

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

gougou168 49楼•2 天前

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

htzhanglong 50楼•2 天前

重构的时候就知道 tailwind 香了

songsunli 51楼•2 天前

 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"); }, }, }); 

yuanlaile 52楼•2 天前

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

yibo5220 53楼•2 天前

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

vueper 54楼•2 天前

这种巨坑

sinazl 55楼•2 天前

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

yuanlaile 56楼•2 天前

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

ionicwang 57楼•2 天前

sass + react-jss + antd 还行

caililin 58楼•2 天前

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

htzhanglong 59楼•2 天前

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

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

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

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

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

phonegap100 60楼•2 天前

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

ionicwang 61楼•2 天前

还是有 CSS module

phonegap100 62楼•2 天前

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

sinazl 63楼•2 天前

在2024年，React项目中使用CSS并结合Node.js的最佳实践通常涉及CSS模块化、CSS-in-JS库（如styled-components或emotion）或CSS预处理器（如Sass），以及构建工具（如Webpack或Vite）的集成。这里介绍一种使用styled-components和Vite的示例，因为它们在React项目中非常流行且易于设置。

使用 `styled-components` 和 Vite

安装依赖：首先，确保你已经安装了Node.js和npm（或yarn）。然后，初始化一个新的React项目并安装styled-components和Vite相关依赖：
```
npx create-react-app my-app
cd my-app
npm install --save styled-components
npm install --save-dev vite [@vitejs](/user/vitejs)/plugin-react
```
注意：实际上，Vite通常需要从项目创建阶段就集成，这里为了简化说明，假设你已经有一个React项目。

配置Vite（如果尚未配置）：在项目根目录创建vite.config.js，配置React插件。

import { defineConfig } from 'vite';
import react from '[@vitejs](/user/vitejs)/plugin-react';

export default defineConfig({
  plugins: [react()]
});

使用 styled-components：

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function App() {
  return <Button>Click Me</Button>;
}

export default App;

这种方法结合了React的组件化思想和CSS的样式封装，同时利用Vite提供的快速开发体验。

2024 年了，现在 REACT 中使用 CSS 的 Nodejs 相关正确姿势是什么？

使用 styled-components 和 Vite

使用 `styled-components` 和 Vite