常见 CSS 方案简单总结
原生 CSS
优点:
- 简单
Less / Sass 等 CSS 预编语言
优点:
- 在
CSS基础上增强函数、theme 等特点(不过 css variable 也支持 theme ) - 编译可以做一些 treeshaking 的优化,体积相对
CSS会更优一些
CSS/Less Module
这是一种 CSS In CSS 的方案
优点:
- 能解决样式冲突的问题
缺点:
- 相对应的缺点是样式不能自由覆写
CSS In JS
以 styld-components 和 emotion css 为代表的一些方案
优点:
- 相比
CSS Module而言,样式可在 JS 层灵活控制(如根据 JS 状态切换不同的样式,CSS Module 包括其它方案需要在 clssName 层控制)
缺点:
- 相对应的缺点是样式不能自由覆写
- 会写很多的冗余代码,样式不太好做复用?
Utility CSS
以 tailwind css 和 windcss 为代码的一些 CSS 方案。
问题
目前在考虑我的项目代码怎么写,感觉很难 all in 到其中一种方案里
咨询下贵站的大佬们平时都倾向于使用哪种或哪几种组合方案,及其原因
