大家都用什么写CSS

主要针对React选手，如题，写CSS方法太多，又容易乱，好奇大家用什么写CSS，相较其他技术，为什么有这样偏好，请大家踊跃发言。以下方案备选，不够自己加

楼主目前用styled-components，但是似乎runtime机制会拖性能影响体验


css，CSS Module， SASS， less， styled-components, tailwindcss

身为一个前端，我一般把写css这种活丢给ux……
非要我写的话，就要么tailwind要么styled system+sass吧，能凑合着看就行了，颜色也就黑灰白，做出来的网页像极了大型灵堂现场

补充内容 (2023-10-14 15:48 +08:00):
为啥选tailwind - 因为代码量少
为啥选styled systems+sass - 因为直观而且写着方便
性能啥的，完全不考虑。除非是会被多个app复用成百上千次的组件（然而这种组件一般也不用sde从头写css），否则performance省下到那点时间完全比不上我写css省下的时间。有这个精力我不如好好优化一下hooks和api

Rachy 发表于 2023-10-26 19:17:45
你能优化hook和API，就是full stack了吧。前端的定义到底是啥。。。 我们写css就是前端的活lol 可能因为我们组没有纯UI/UX designer 我们前端还要画图设计

我觉得前后端的分水岭是api，负责给api提要求，然后从api获取response并进行展现的就是前端。反之负责从api拿request，然后决定respond什么的就是后端。虽然不同组不同的项目，前后端的工作量差异可以很大。比如小型电商网站，可能前端10%后端90%，而google slides/miro这种可能前端70%后端30%。
虽然现在我确实也变成偏前端的全栈了，这俩礼拜一直都在写golang😂
至于css，因为我在一个比较大的厂，基本上已经有ui component library可以直接拿来用了，日常的styling基本就是改改margin和padding之类的。主要的时间是用于如何使用现有的ui component实现复杂的业务逻辑。

我是一直纯前端。。。 可能是开始纯做前端的年代久远，或者不思进取，我是直接写css的。。。浏览器上直接写就能实时看效果，简单直接，因为我们会用现有的一些UI library，所以只是在library已有的style上加，或者改动的话工作量不大的。所以大家都是为什么不直接写css？

Styled-component真是我用过最恶心的css工具，没有之一，不开玩笑。。

这玩意儿相当于写一堆string，所以根本没有报错。。不过你是大括号位置不对，还是div里用了&:after，统统啥都没有。。

而且这玩意儿没啥标准，你说你用它还用不用scss nesting?你是最外面写个wrapper，然后里面加classname，然后用scss nesting来写，还是写一堆styled components，然后一个个import进来。。

前者用nesting 来写？虽然这玩意儿支持，但是像我上面说的，它连个报错都没有，你打算最多nesting几层呢？后者在我看来蠢到爆炸，连纯css都不如。。

补充内容 (2023-10-14 19:17 +08:00):
个人认为scss就足够好了，用别的一切都是歪门邪道🤣

ubatuba 发表于 2023-10-14 02:37
身为一个前端，我一般把写css这种活丢给ux……
非要我写的话，就要么tailwind要么styled system+sass吧，能 ...

感谢回复 您很幸福 我们组没有ui/ux 只能自己上手了 还不能太难看 更不能太慢

我觉得tailwind很好，可以先用他那一套...

Tailwindcss +1

tailwind已经快成为写前端的标配了吧

必然是Tailwind

tailwind 简单，但是维护很麻烦，队友得看你写的屎，但我做个人开发就很喜欢tailwind

Rachy 发表于 2023-10-26 18:57
我是一直纯前端。。。 可能是开始纯做前端的年代久远，或者不思进取，我是直接写css的。。。浏览器上直接写 ...

刚才去搜了一下大家说的很多的Tailwind。。。 这个应该就是一个UI的library。那我应该是理解错问题了，问题应该是在React上大家用什么style library（对这个的叫法可能不一样）。我早期用bootstrap，后来用过一些当时工作时用的framework自带的style，还用过Material Design，Metro UI，Fluent UI。 主要是看你们需要的风格和哪个library提供的最像。然后在所用的library基础上我都是直接写css（加class 或者用library已有的class直接强行加css）去改成需要的样子。