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

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

[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 所以我是限制自己都是布局时用用

[justyeh]

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