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

[zhonj]

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

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

[xiaoqidev]

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

[crysislinux]

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

[Hanser002]

tailwindcss + emotion

[leonfong]

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

[justyeh]

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

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

[dfkjgklfdjg]

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

[justyeh]

我不理解用 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]

```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]

@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]

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

[R1hu6Hs2sSN8pkVX]

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

[R1hu6Hs2sSN8pkVX]

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

[zhonj]

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

[justyeh]

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

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

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

[wdking]

啥都用过 总结：windicss

[zhouyg]

总之，最后是 tailwind

[CHTuring]

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

[CHTuring]

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

[ztc]

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

[murmur]

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