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

[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 不是更好吗