[问题交流] 常见的 CSS 方案选择

[anc95]

常见 CSS 方案简单总结

原生 CSS

优点：

1. 简单

Less / Sass 等 CSS 预编语言

优点：

1. 在 CSS 基础上增强函数、theme 等特点（不过 css variable 也支持 theme ）
2. 编译可以做一些 treeshaking 的优化，体积相对 CSS 会更优一些

CSS/Less Module

这是一种 CSS In CSS 的方案

优点：

1. 能解决样式冲突的问题

缺点：

1. 相对应的缺点是样式不能自由覆写

CSS In JS

以 styld-components 和 emotion css 为代表的一些方案

优点：

1. 相比 CSS Module 而言，样式可在 JS 层灵活控制（如根据 JS 状态切换不同的样式，CSS Module 包括其它方案需要在 clssName 层控制）

缺点：

1. 相对应的缺点是样式不能自由覆写
2. 会写很多的冗余代码，样式不太好做复用？

Utility CSS

以 tailwind css 和 windcss 为代码的一些 CSS 方案。

问题

目前在考虑我的项目代码怎么写，感觉很难 all in 到其中一种方案里

咨询下贵站的大佬们平时都倾向于使用哪种或哪几种组合方案，及其原因

[shintendo]

css modules + tailwind

[shintendo]

记得以前比较抗拒 tailwind 是觉得它跟行内 style 差不多，把样式耦合在了 html 上面。后来有一篇文章把我说服了，大意是说把样式与 html 解耦是一个幻想，大部分脱离于 html 单独写的 css ，其实都在 css 里又维护了一份 html 结构。

[chenliangngng]

说说我的实践，react 技术栈

less ，用不用无所谓，曾经的优点在现代的 css 和各种已封装组件库面前，聊胜于无
css module ，长期在使用，没有特别大的缺点，改 class 名字可能不如 vue 的 scoped 加 data-
styld-components ，用过半年，我个人觉得很扯淡的技术方案，方便单元测试倒是可以，但是背离关注点分离原则，js 和 css 混在一起，久而久之让 js 代码稀烂
tailwind css ，用过 3 个月，后面全删了重写。原因是学了 css 再学另一套 class 有点没必要，每次要过 2 遍脑袋，其实并不直观，而且必要的时候还是要自己写 style 和 class

推荐 less+css module ，不要再带别的了

[DOLLOR]

我选 less/sass 。
如果你有信心应对“五彩斑斓的黑”，tailwind 也不是不行。