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

[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 个地方。大家有啥宝贵的经验可以分享分享

[daliusu]

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

[shuxhan]

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

[LandCruiser]

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

[NoManPlay]

目前用 React +scss+CSS Modules

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

[Leviathann]

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

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

[CHTuring]

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

[ztc]

相比 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]

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

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

[fox2081]

tailwind 有啥学习成本

[zhonj]

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

[zhonj]

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

[zhonj]

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

[zhonj]

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

[shuxhan]

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

[zhonj]

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

[zhonj]

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

[Perry]

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

[wbwm]

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

[ljsh093]

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

[ljsh093]

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

[xiaoqidev]

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

[crysislinux]

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

[Hanser002]

tailwindcss + emotion

[leonfong]

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

[MMDeJeVS3GtMVLeu]

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

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

[dfkjgklfdjg]

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

[MMDeJeVS3GtMVLeu]

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

[MMDeJeVS3GtMVLeu]

```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 种取名方式。

[MMDeJeVS3GtMVLeu]

@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 自己写，都是直接封装成组件

[sadyx]

2

[magewu1223ll]

react cssModule

[karott7]

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

[snarkprayer]

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

[IvanLi127]

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

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

[zhonj]

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

[zhonj]

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

[zhonj]

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

[maxssy]

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

[SolidZORO]

@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 都方便很多。

[Pastsong]

我 React 通常是写 scss + css module ，但我累了不想起类名的时候就去写 styled-component

[anguiao]

Tailwind 确实很容易把 class 写得很长。但是写多了之后就会意识到，一些样式是不需要显式指定的，默认值就可以满足需求。
善于利用默认值，可以少些很多不必要的样式。就算有时候不用 Tailwind 了，我也发觉到自己以前写了很多不必要的代码。

[Danswerme]

@SolidZORO 请教一下，鼠标点击 styles.xxx 直达样式你用的是哪个插件呢？ 我在 VSCode 里用了插件之后点击 styles.xxx 虽然可以正常跳转到 scss 文件里，但是不能正确定位到对应类名。

[SolidZORO]

@Danswerme 我不常用 VSC ，用的是 IDEA ，装了这个 https://plugins.jetbrains.com/plugin/9275-react-css-modules 我觉得只要是个 css modules 插件都能做到这件事情吧？

[vaaagle]

前端需要纠结的，过阵子你会发现它并不在这里面。除非有要求，哪个对当前项目方便就怎么来，但是最好统一

[zdw189803631]

tailwindcss + style

[weixiangzhe]

布局用 unocss/tailwindcss , 其他的写 class ，其他的大都是有 ui 老师传设计稿到 蓝湖 figma 之类的，直接 copy 就好了，写 tailwindcss 更累了

[zhonj]

@weixiangzhe 混着来，写是块了，但是改起来就头疼了

[weixiangzhe]

@zhonj 所以我是限制自己都是布局时用用

[MMDeJeVS3GtMVLeu]

@zhonj 不是无脑 copy ，会选择性的删除一些用不到的属性，经常用到的是 fontSzie 、color 、border 、background ，真的很方便

[vlgs]

公司用 styled component 。自己使用 tailwindcss ，推荐一个库 https://ui.shadcn.com/ 可以理解一下 tailwind radix 怎么制作 headless component 。