采用Tailwind CSS或Bootstrap 5等成熟框架打底是快速建立项目规范最务实的方式，二者均支持现代构建工具、RTL/暗色模式及按需引入，需配合CSS变量统一主题、约定类名使用规范，并通过stylelint等工具自动化校验。
直接用成熟 CSS 框架打底，是快速建立项目规范最务实的方式。它省去从零设计命名、布局、响应式、重置样式等重复劳动，把精力聚焦在业务逻辑和视觉定制上。
选一个主流、文档全、生态稳的框架
推荐优先考虑 Tailwind CSS（原子类 + 高度可配置）或 Bootstrap 5（组件驱动 + 语义化类名）。两者都支持现代构建工具（Vite、Webpack）、有完善 RTL/暗色模式支持，且社区插件丰富。避免小众或长期未更新的框架，否则后期维护成本会陡增。
- Tailwind 适合需要强定制、设计系统较统一的项目，通过
tailwind.config.js可集中管理颜色、间距、断点等设计变量 - Bootstrap 更适合中后台、快速出原型，自带模态框、表格、表单组件，开箱即用
- 二者都支持按需引入（如 Tailwind 的
@layer+purge，Bootstrap 的 Sass partials），避免样式冗余
约束使用方式，防止“类名滥用”
框架只是基线，不是自由发挥的借口。需明确团队约定：
- 禁止在 HTML 中写内联样式（
style="..."），所有样式走 class - 禁止直接覆盖框架基础类（如重写
.btn的padding），应通过扩展类（.btn-primary-lg）或自定义 CSS 变量实现 - 组件级样式优先用框架语义类组合，复杂 UI 再抽离为独立 CSS Module 或
用 CSS 自定义属性（CSS Variables）做主题与品牌收敛
在框架基础上，用 :root 定义一套业务专属变量，作为设计系统的锚点：
立即学习“前端免费学习笔记（深入）”；
- 例如：
--brand-primary: #3b82f6;、--space-unit: 0.5rem;、--radius-sm: 4px; - Tailwind 中可通过
theme.extend将其映射到colors、spacing等配置项 - Bootstrap 中可在
_custom.scss中覆盖$primary、$spacer等 Sass 变量 - 后续所有定制样式（包括组件库、图表库）都引用这些变量，确保视觉一致性
配套轻量级 lint 与自动化检查
光靠约定不够，加一层机器校验：
- 用 stylelint + 对应插件（如
stylelint-config-standard+stylelint-config-tailwindcss）检测类名拼写、未知类、冗余声明 - 在 CI 流程中运行
npx tailwindcss -c tailwind.config.js --check，确保配置变更不破坏生成规则 - 用 PostCSS 插件（如
postcss-custom-properties）保障 CSS 变量在旧浏览器中的降级行为可控
不复杂但容易忽略：框架不是终点，而是起点。真正让项目可持续的关键，在于用好它的可配置性，并用轻量规则守住边界。
