🧼 为什么我开始在项目里禁用 CSS 文件？

🧼 为什么我开始在项目里禁用 CSS 文件？

“你写的是组件，不是瀑布流样式表。”

---

💢 我们的 CSS，早就不是 CSS 了

你是不是也遇到过这些情况：

• 想改一个按钮的颜色，结果牵一发动全身

• 样式规则动不动几百行，嵌套好几层

• CSS 文件一改就冲突，一合就炸

• Tailwind / styled-components / CSS Modules 一大堆混着用

你以为你在写 CSS，其实你在维护一个样式债务黑洞****

---

🧠 所以我试了一件事：

项目里禁用 CSS 文件，仅保留 class 生成工具

• 不写 .css / .scss 文件
• 样式完全由工具类 + 函数生成（Tailwind + 自定义函数）
• 每个组件只控制自己，样式从不“扩散”

---

✅ 实际写法长这样：

❌ 老写法：

/* button.css */
.btn {
  background: var(--color-primary);
  padding: 8px 16px;
  border-radius: 4px;
}

<button className="btn">提交</button>

✅ 新写法：

import { cn } from '@/lib/utils'

export function useBtnClass(variant = 'primary') {
  return cn(
    'inline-flex items-center justify-center px-4 py-2 rounded transition',
    variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700',
    variant === 'danger' && 'bg-red-600 text-white'
  )
}

<button className={useBtnClass('danger')}>提交</button>

---

🎯 好处有这些：

问题	原来	现在
样式变更	改 CSS 文件，小心命中其他组件	改函数 return 值，只影响自己
冲突合并	样式难 diff、容易炸	函数改动一目了然
复用能力	样式名难复用	函数按需组合参数
组件一致性	每人写一套样式	大家都调同一个函数

---

🧩 小贴士：怎么做迁移？

你不需要一次性全替换，可以：

1. 从组件级别的按钮、输入框开始提取 useXxxClass
2. 遇到通用样式，写成 utils 中的函数（像 useSpacing / useShadow）
3. 保留 legacy CSS，用新写法做平替，慢慢迁移

---

💬 如果你也有样式痛点……

欢迎评论区交流！

你是否在项目里：

• 还在维护一整套 SCSS + 主题变量？
• 和同事样式命名冲突打架？
• 无法落地统一视觉语言？

---

🧩 我正在用这个模式重构我做的几个项目，包括：

• 📦 gix：Git CLI 工具

• 🕒 ixiu：macOS 提醒器

• 📱 自用 React Native UI 系统

有兴趣我可以出个系列专讲“函数式 UI 样式实践”。

---