🧼 为什么我开始在项目里禁用 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 样式实践"。


相关推荐
大只鹅20 分钟前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
小白变怪兽20 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头23 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
IT_10241 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
bobz9651 小时前
动态规划
后端
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
stark张宇1 小时前
VMware 虚拟机装 Linux Centos 7.9 保姆级教程(附资源包)
linux·后端