Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 1026 天前的主题，其中的信息可能已经有所发展或是发生改变。
常见 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 到其中一种方案里
咨询下贵站的大佬们平时都倾向于使用哪种或哪几种组合方案，及其原因
 |
1
daysv 2022-01-18 14:38:25 +08:00
tailwind css 足矣
|
 |
2
koor 2022-01-18 14:41:24 +08:00
rebass 搭配 styled-components
|
 |
3
weixiangzhe 2022-01-18 14:41:31 +08:00
我还在用 CSS Module 配合 less, 主要是简单够用
|
 |
4
zcf0508 2022-01-18 14:42:41 +08:00
在用 windicss ，主要是样式写起来很爽，不用跳去单独写 css
|
 |
5
heyjei 2022-01-18 14:44:03 +08:00
现在流行 tailwind 了吗？看来要去学习了
|
 |
6
ddiu8081 2022-01-18 14:47:16 +08:00
tailwind css ，能节省大量时间在起 class 名上
|
 |
7
shyling 2022-01-18 15:13:28 +08:00  1
|
 |
8
TomatoYuyuko 2022-01-18 15:16:56 +08:00
用过 tailwind css 但不太喜欢，个人比较沉迷手撸 sass 的快感
|
|
9
shyling 2022-01-18 15:17:46 +08:00
个人的感觉是 css module 不太喜欢，为了解决冲突带来的麻烦有点多，而且也解决不了命名难的问题。
css in js 就更麻烦了, 首先改 className 问题也不大，style={{ backgroundColor: a ? 'red': 'blue' }} 好像也没啥问题 |
 |
10
newbieRenew 2022-01-18 15:19:56 +08:00 via iPhone
借助 Sass 纯手工打造。那个 tailwind 的用法简直是灾难，特别是官网的例子，完全弄成标记语言了，看似复用，其实完全背离了模块化的理念，耦合太多，一旦需要改变某个数值，改起来简直是灾难。
|
 |
11
f056917 2022-01-18 15:32:44 +08:00
@TomatoYuyuko +1 ，我都是手撸的
|
|
12
f056917 2022-01-18 15:33:30 +08:00
主要是担心用别的会样式冲突
|
|
13
newbieRenew 2022-01-18 15:37:23 +08:00 via iPhone
tailwind 的糟点用一个例子来形容： 某个边栏，你命名为“nav-left”并置于左边。一天，需求变更为放在右边，为了让其他人看明白，你是可能会更改名字为“nav-right”并置于右边。当变更频繁、没有模块化时，你更改的地方可能会很多了。其实你可以更好的命名为“nav-side”，从样式表里来控制它的方位，无需更改页面布局。
|
 |
14
XCFOX 2022-01-18 16:59:18 +08:00
|
 |
15
vanton 2022-01-18 17:20:40 +08:00
tailwind 使用起来就是灾难。
一旦有大量需要修改类似组件的需求，工作量远超过手写 css |
 |
16
yaphets666 2022-01-18 17:50:44 +08:00
专业的前端,做前端工程,只有一个选择,就是 scss
|
 |
17
fortunezhang 2022-01-18 20:31:50 +08:00
个人现在只用 scss 。妥妥的生产力
|
 |
18
Cbdy 2022-01-18 20:55:32 +08:00
分享一下我的实践的感想，你说的我基本都稍微用过，实际实践下来的话
CSS Modules ，公司项目，有一些用 CSS Modules 的，但个人项目已经不用了，以前用的也改造掉了 用 Emotion 写的石头剪刀布小游戏 https://github.com/alchemy-works/RPS 用 styled-components 写的五子棋小游戏 https://github.com/alchemy-works/gomoku 用 Tailwind CSS 写的 Todo List https://github.com/alchemy-works/todo-list 实际是这么几种方案： - CSS Modules （包括 Vue 的 SFC 中的 Scoped CSS ）：依赖编译工具链，和原有写 CSS 体验最接近，单独的 CSS 文件 - CSS in JS （ styled-components 、Emotion 、styled-jsx 等）：可以脱离编译工具链，更加灵活，和 JS 相性好 - CSS 原子类（ Tailwind CSS 等）：正经使用要编译工具链，使用成本有点大 - 行内 CSS：这个局限性太大了，在很少场景作为补充使用 我个人更倾向于 styled-components/emotion 这种 CSS in JS 的方案 快速写静态的小页面我可能会用 Tailwind CSS 一把梭 |
 |
19
BealuoC 2022-01-18 20:56:59 +08:00
tailwind
|
 |
20
doommm 2022-01-18 21:23:09 +08:00
推荐试试 tailwindcss 。我是用它结合传统的 scss ，配合 vue/react 的组件化使用
|
 |
21
shintendo 2022-01-18 21:28:52 +08:00
css modules + tailwind
|
|
22
shintendo 2022-01-18 21:39:12 +08:00 1
记得以前比较抗拒 tailwind 是觉得它跟行内 style 差不多，把样式耦合在了 html 上面。后来有一篇文章把我说服了，大意是说把样式与 html 解耦是一个幻想，大部分脱离于 html 单独写的 css ，其实都在 css 里又维护了一份 html 结构。
|
 |
23
chenliangngng 2022-01-18 22:31:32 +08:00
说说我的实践，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 ，不要再带别的了 |
 |
24
DOLLOR 2022-01-18 23:08:00 +08:00 via Android
我选 less/sass 。
如果你有信心应对“五彩斑斓的黑”，tailwind 也不是不行。 |
Select Language