CSS样式管理应分层：原子类（如.p-12、.rounded）负责单一职责；组件类（如.card）用BEM规范组织；通过CSS变量统一管理主题色与间距，避免重复和硬编码。
样式重复是新手写 CSS 时最常踩的坑——比如多个按钮都写了 padding: 12px 24px; border-radius: 6px; font-weight: 500;，改一处就得找五六处同步改。解决核心就一条：把视觉表现一致的样式，抽成独立类名，按需组合使用。
从“功能+状态”角度命名公共类
别用 .btn-blue 或 .title-big 这种绑定具体颜色/尺寸的命名，容易过时。优先按语义和用途来：
-
.text-center（居中对齐文字） -
.p-12（内边距 12px，可搭配.p-t-8、.p-lr-16等细化） -
.rounded（圆角，默认 6px）或.rounded-lg（大圆角） -
.d-flex、.justify-between（布局类，类似 Bootstrap 的实用工具类思路）
这类类名清晰、易记、可预测，加到任意元素上都能立刻生效，不用反复写相同声明。
用 BEM 规范组织组件级样式
当某个模块（如导航栏、卡片）内部结构固定、复用频繁，就该上 BEM（Block–Element–Modifier）：
立即学习“前端免费学习笔记（深入）”；
-
.card：整体块（Block） -
.card__header：块内的元素（Element） -
.card--featured：块的变体（Modifier）
这样既避免全局污染，又能一眼看出层级关系。例如所有 .card--featured 都统一加阴影和边框，改一次就全更新，不依赖 HTML 结构变化。
提取原子类 + 少量组件类，拒绝“一例一写”
新手常犯错误：每个新按钮都单独写一套 class，结果 CSS 文件越滚越大。正确做法是分层管理：
-
原子类（Atomic CSS）：负责单一职责，如
.bg-primary、.fs-14、.m-b-20，全局可复用 -
组件类（Component CSS）：封装完整交互单元，如
.search-input，内部调用原子类，不直接写值 - 页面/区块类（Page CSS）：仅用于局部布局微调，尽量少写，不复用也无妨
比如写一个搜索框，HTML 可以是：<div class="search-input d-flex"><input class="flex-1 p-12 fs-14 rounded-l" /><button class="bg-primary text-white p-12 rounded-r">搜</button></div>
所有样式都来自已有类，无需新增 CSS 行。
用 CSS 自定义属性（CSS Variables）管主题色和间距
颜色、字号、圆角、阴影这些易变参数，别硬编码。在 :root 定义变量：
:root {
--color-primary: #4a6fa5;
--space-sm: 8px;
--space-md: 16px;
--radius: 6px;
}
然后公共类直接引用：
.btn { background: var(--color-primary); }.p-md { padding: var(--space-md); }.rounded { border-radius: var(--radius); }
换主题？只改几个变量值，整站样式自动适配。
