大家公司里面写前端样式都是咋写的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 495 天前的主题，其中的信息可能已经有所发展或是发生改变。

全写 style 里面（估计没人这么写）
class 里面就一个(class="my-container") 具体样式写在 style 文件里
使用 tailwindcss 原子类，全部写 class 里面（ class="flex flex-col ...."）
使用 tailwindcss 原子类，class 里面写一个具体使用 apply 卸载 style 里面（ class="my-container" .my-container{@apply flex flex-col ....}）

本人刚写前端没多久，没学过 style 直接用的 taildcss 之前写过安卓，习惯用 3 方式，tailwind 无法实现才用 4 。但是公司内其他的老前端都喜欢用 2 ，又有些人喜欢用 4 ，我不是很理解，样式分出来了要改的时候非常麻烦啊，找样式找不到得用代码得开两个页面去找，配合显示页面的地方要看 3 个地方。大家有啥宝贵的经验可以分享分享

class

style

样式

flex-col

61 条回复 • 2023-07-08 19:00:05 +08:00

daliusu

2023-07-04 09:51:39 +08:00

css-in-js 保平安，再也没有了这么多问题

shuxhan

2023-07-04 09:56:31 +08:00

3.4 更适合统一化的 ui 吧，像我们公司，网页都是定制化的，用原子化基本满足不了，一个项目能拆几十个 css 文件，基本都是千行往上

LandCruiser

2023-07-04 09:56:58 +08:00

1：tailwind 不适用于所有场景。
2：你会 tailwind 不代表别人会 tailwind ，增加了学习成本但收益不大，不解决痛点难点。但是大家都会 CSS 。
3：CSS 原子类这种写法在远古时代就有了，但没有大规模流行开来，只是部分应用。

NoManPlay

2023-07-04 10:04:34 +08:00

目前用 React +scss+CSS Modules

1.将 scss 文件作为 styles 变量引入 import styles from "xxx.module.scss"
2.然后在 react 中作为 className 使用 className={styles.xxx}
这样会在编译后自动为 className 加上混淆，防止了样式污染

Leviathann

2023-07-04 10:08:10 +08:00

原来是 2
后来写了一个新的小项目体验了 tailwind ，被我强行写了一堆仿 tailwind 的原子类模拟成 3

没什么学习成本，收益很大，大多数常见的样式都能复用

CHTuring

2023-07-04 10:09:24 +08:00

@LandCruiser
1 、同意
2 、说反了，tailwind 的学习成本很小，但是收益很大
3 、CSS 原子类这种写法远古时代就有，其实也有流行开，参考 bootstrap

ztc

2023-07-04 10:21:49 +08:00

相比 tailwind, 我觉得 Unocss 更好用, 可以这样写
```html
<div
border="t-3 solid rounded-lg"
p="x-6 y-4"
bg="white dark:gray-800"
hover="scale-105 cursor-pointer"
shadow-2xl
relative
max-w-xl
transition
/>
```

个人感觉比在 style 里写样式，效率是要更高的，而且看起来很清晰

tool2d

2023-07-04 10:46:44 +08:00

我就是全写在 style 里面，但是因为 style 的原生语法又臭又长，我自己写了一个缩写转换。

举个例子，我会这样写<div css="flex my-10 mx-auto w-full h-full">，解析 dom 时，会动态展开 w-full 为 weight:100%, flex 为 display:flex;

fox2081

2023-07-04 10:53:01 +08:00

tailwind 有啥学习成本

zhonj

2023-07-04 10:58:13 +08:00

@ztc 新项目我也用的 unocss 但是唯一的缺点是这样写没提示啊，得硬敲

zhonj

2023-07-04 11:00:27 +08:00

@CHTuring 确实是简单，我新手 5 分钟就上手原子类 css , 1 天基本就熟了。对新手确实是友好的比 style 简单很多，但是坏处是碰到复杂的样式还是得学习 style

zhonj

2023-07-04 11:03:09 +08:00

@shuxhan 你们拆了 10 几个 css 文件，如果要修改，找起来不头大么？先看页面定位，然后看 html ，再看 css 。我们公司同事用 4 写的，我改起来人都是麻的

zhonj

2023-07-04 11:06:28 +08:00

@daliusu 这玩意调试应该也不简单吧，浏览器调试找到哪里的东西，然后一层一层翻组件

shuxhan

2023-07-04 11:07:10 +08:00

@zhonj #12 根据，页面>功能拆分，命名也比较规范，修改起来难度不大，主要是量太多

zhonj

2023-07-04 11:08:36 +08:00

感谢大家的回复，这么看下来前端是真的杂啊。各种各样的方式方法，目前还是没找到写样式最舒服的方式😪

zhonj

2023-07-04 11:10:49 +08:00

@shuxhan #14 公司多个人协作有强命名规范确实能解决很大的问题

Perry

2023-07-04 11:14:01 +08:00 via iPhone

公司有比较好的 design system 的，估计一句 style 都不用写（除了设计师想出来的一些更复杂应用场景比较特殊的 components ），直接用现成的 react components 。

wbwm

2023-07-04 11:19:24 +08:00

@tool2d #8 你这不就是 tailwind 吗？😂

ljsh093

2023-07-04 11:19:42 +08:00

@daliusu #1 不会有性能问题吗

ljsh093

2023-07-04 11:20:39 +08:00

@tool2d #8 你这个 css 改成 class 不是更好吗

xiaoqidev

2023-07-04 11:21:05 +08:00

@zhonj #10 UnoCSS 有 VSCode 扩展支持提示，也兼容 Tailwind 写法

crysislinux

2023-07-04 11:23:30 +08:00 via Android

tailwind 自己写还好。改别人写的就大大的不好了。

Hanser002

2023-07-04 11:25:49 +08:00

tailwindcss + emotion

leonfong

2023-07-04 11:27:45 +08:00

自己写项目偏向 3 ，团队协作用 4 ，感觉 4 就是兼具了整合了 23

justyeh

2023-07-04 13:32:40 +08:00

之前一个同事用了 tailwindcss ，UI 设计的花哨点，样式代码比标签长
我去改样式，p-8 、f12 都是什么鬼，还要一个个的去看

没有成熟的设计规范，tailwindcss 请自己玩玩就好

dfkjgklfdjg

2023-07-04 13:36:32 +08:00

觉得 tailwindcss 会造成 className 过长的可以试试看 [DaisyUI]( https://daisyui.com/) 这种 UI 库，会清爽很多。

justyeh

2023-07-04 13:38:22 +08:00

我不理解用 taildcss 是赶时髦还是怎么的，这种代码真的好吗？

```
<div
v-for="(group, idx) in schema"
:key="idx"
class="min-h-[70px] relative"
>
<div
:class="setOuterClass(idx)"
@click="() => {
active = idx
}">
<div :class="setInnerClass(idx)">
<div>{{ idx + 1 }}</div>
</div>
</div>
<div class="absolute text-[12px] left-[50%] top-[32px] min-w-[70px] translate-x-[-35px] text-center" :style="{ color: active >= idx ? '#3F7AFF' : '#CBCBCB'}">{{ group.label }}</div>
</div>
```

justyeh

2023-07-04 13:41:36 +08:00

```js
// 头部导航栏样式
setInnerClass(idx) {
const isBefore = idx < this.active
const isCurrent = idx === this.active
const isAfter = idx > this.active
const beforeClassInner =
'min-w-[22px] max-w-[22px] w-[22px] h-[22px] bg-[#ffffff] text-[#3F7AFF] text-center text-[12px] font-semibold leading-[18px] rounded-full border-[2px] border-[#C8D7F9]'
const currentClassInner =
'min-w-[22px] max-w-[22px] w-[22px] h-[22px] bg-[#3F7AFF] text-[#fff] text-center text-[12px] font-semibold leading-[18px] rounded-full border-[2px] border-[#124FDA]'
const afterClassInner =
'min-w-[22px] max-w-[22px] w-[22px] h-[22px] bg-[#ECECEC] text-[#CBCBCB] text-center text-[12px] font-semibold leading-[18px] rounded-full border-[2px] border-[#ECECEC]'
return (isBefore && beforeClassInner) || (isCurrent && currentClassInner) || (isAfter && afterClassInner)
},
setOuterClass(idx) {
const isBefore = idx < this.active
const isCurrent = idx === this.active
const isAfter = idx > this.active
const beforeClassWarp = 'z-[2] max-w-[26px] relative rounded-full border-[2px] border-[#C8D7F9]'
const currentClassWarp = 'z-[2] max-w-[26px] relative rounded-full border-[2px] border-[#C8D7F9]'
const afterClassWarp = 'z-[2] max-w-[26px] relative rounded-full border-[2px] border-[#ECECEC] custom-linear-box-shadow'
return (isBefore && beforeClassWarp) || (isCurrent && currentClassWarp) || (isAfter && afterClassWarp)
},
```

SolidZORO

2023-07-04 13:43:02 +08:00 via iPhone

@NoManPlay 同意这点，css modules 就很好了。

我个人只用 css modules ，当然是在 less/sass 里面用。

这样任何人看了也不会有学习成本，鼠标点击 styles.xxx 还能直达样式。

原生 css 没有任何 dsl 和语法糖还是非常好的，喜欢写原生 css 。

用 bs/tw 的这部分群体我很久之前就观察过了，就是不会 css ，或者觉得 css 难写不好 css 的用户是主要群体。当然不排除一部分 css ，大佬也爱用。

css-in-js 是我最不待见的，每家为了实现原生 css 的一些 fn ，用尽了各种 dsl 和语法糖，导致学习成本很高而且还跑在 runtime ，对性能有影响，最近新出号称下一代 zero runtime 的 panda 用起来其实也很别扭。

当然 CIJ 并不少一无是处，在我看来最大的好处就是可以做到 css 和 js 可以复用变量，也就是 css vars 直接写成 const 。以及可以做 scope 隔离，一个 app 可以做多个 scope 的多套 theme ，这些点都挺好的，除此之外我没感觉到其他优势。

SniperXu

2023-07-04 13:45:12 +08:00

试试 unocss ？最近用的离不开了

R1hu6Hs2sSN8pkVX

2023-07-04 14:15:26 +08:00

@CHTuring 收益大哪了，那一长串的 class 写完之后大家都不写 bem 类名了恶心死了

R1hu6Hs2sSN8pkVX

2023-07-04 14:19:03 +08:00

@CHTuring 还有美其名曰什么可以大幅压缩 css 的大小其实是偷换概念你的包大小全放在 js 的类名中了

zhonj

2023-07-04 14:23:32 +08:00

@whatFoxSay #31 class 丢一个类名当你要维护的时候你得开三个页面，一个浏览器定位，一个 html 定位节点，一个 style 定位样式，找起来没有使用 windcss 或者 unocss 方便，而且 bem 类名这玩意取名字真是很佛系的，一个团队 10 个人有 10 种取名方式。

justyeh

2023-07-04 14:35:24 +08:00

@zhonj 为什么会有去维护一个类名的需求，写 vue scoped ，写 react 就 css module ，我写样式除了 @include text-ellipsis;这样的仅有的几个代码，几乎不复用

定位要么一眼就观察到了，要么 cmd+f

还有一个很重要的点，类似于蓝湖这样的工具已经能生成很多样式代码，拷贝+简单的修改就可以活，效率和心智负担比 tailwindcss 之类的玩意强太多了

wdking

2023-07-04 14:40:26 +08:00

啥都用过总结：windicss

zhouyg

2023-07-04 14:41:49 +08:00

总之，最后是 tailwind

CHTuring

2023-07-04 15:15:42 +08:00

@whatFoxSay 你说的对，不过有个东西叫 apply

CHTuring

2023-07-04 15:16:21 +08:00

@whatFoxSay 你说的对，但不是只有 css in js ，还有 .css

ztc

2023-07-04 15:29:54 +08:00

@zhonj 对，就是省了起名字的问题了，类名多了起名字还得纠结半天...

murmur

2023-07-04 15:33:00 +08:00

less 、class 自己写，都是直接封装成组件

sadyx

2023-07-04 16:00:13 +08:00

magewu1223ll

2023-07-04 16:39:52 +08:00

react cssModule

karott7

2023-07-04 17:03:09 +08:00

直接用 tailwindcss 就好，公司项目永远都会和 tailwindcss 的默认定义有区别，可以和 UI 商量然后自己自定义样式配置，或者直接用 p-[100px] 这样的自定义值（个人会直接用这种方式，公司项目要的是出活快）。
我不在乎 css 样式文件大小或者其他什么优势，主要就是写起来快，顾名思义，不用切换文件，不用思考类名

snarkprayer

2023-07-04 17:05:01 +08:00

3
4 这种情况多数都封装进组件了

IvanLi127

2023-07-04 18:19:31 +08:00 via Android

用 3 的样子写 css-in-js 。macro.tw, twind

用了很多方案，最后感觉这样可靠，省事。

zhonj

2023-07-04 20:14:13 +08:00

@justyeh #34 蓝湖这种自动生成 copy 一时爽，换个人来看来改就是火葬场。我们公司之前人写的 uniapp 小程序代码就是蓝湖 copy 的，我看的头皮发麻，太难改了，而且 uniapp 用微信开发者工具本来就卡，我 i9 都没用，后面直接一口气全部重写掉了

zhonj

2023-07-04 20:23:56 +08:00

@SolidZORO 大佬问下哈 styles.xxx 你们是如何取名字的啊，而且 css 和页面分开了不觉得改起来麻烦么。我就是感觉 class="xxx" 然后.xxx{} 这样取名字太麻烦了，加上我写过安卓 ios flutter 都是类似 unocss 的方式，我的理解可能是 html 和 css 理应在一起而不应分开了增加维护成本。刚写前端不久的小白的想法😁

zhonj

2023-07-04 20:25:40 +08:00

@zhonj #47 所以我才有次贴提问，问问各位 10 年老前端都是咋看待这玩意的

maxssy

2023-07-04 20:33:25 +08:00

antd 默认样式 + 全写 style, 之前也试过 less 和 css-in-js, 但是大多是内部项目也就无所谓了

SolidZORO

2023-07-04 21:39:34 +08:00 via iPhone

@zhonj 就直接命名，没有什么魔法，比如：

```
s.comp-wrapper
s.info
s.info-title
s.info-title-icon
s.info-title-label
s.thumb
s.thumb-img
```

类似这样吧。要抱起来用 -wrapper 里面有隔离用一下 -inner 之类的。我觉得很自然。

而且，我个人不用 s.xxx 命名，用 s['xxx']，目的是不写驼峰，保持和 css 名字对应。这样找代码和 replace 都方便很多。