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

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

"你写的是组件,不是瀑布流样式表。"


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

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

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

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

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

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

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


🧠 所以我试了一件事:

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

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

✅ 实际写法长这样:

❌ 老写法:

css 复制代码
/* button.css */
.btn {
  background: var(--color-primary);
  padding: 8px 16px;
  border-radius: 4px;
}
ini 复制代码
<button className="btn">提交</button>

✅ 新写法:

arduino 复制代码
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'
  )
}
ini 复制代码
<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 样式实践"。


相关推荐
Dolphin_海豚1 分钟前
前端工程化总览
前端·架构·前端工程化
前端进阶者6 分钟前
webRtc之本地预览摄像头设备绿屏问题
前端
_未完待续6 分钟前
框架实战指南-元素参考
前端·vue.js
Undoom7 分钟前
基于 Claude Code 与 BrowserCat MCP 的浏览器自动化全链路构建实践
后端
JarvanMo10 分钟前
救救我的Android app吧
前端
南岸月明11 分钟前
为什么你拼命做副业,却还是赚不到钱?
前端
帅夫帅夫14 分钟前
你真的知道怎么用CSS吗?
前端
蓝胖子的小叮当20 分钟前
JavaScript基础(十)对象方法总结
前端·javascript
MacroZheng27 分钟前
换掉Navicat!一款集成AI功能的数据库管理工具,功能真心强大!
java·后端·mysql
不甘打工的程序猿42 分钟前
nacos融合spring cloud学习【Spring-Cloud-Alibaba】
后端·架构