设计一个易学且适用的简化版CSS框架，关键在于控制复杂度。我们不需要重复造一套像Bootstrap那样庞大的轮子，而是提取日常开发中最常用的布局、间距、文字与颜色能力，用极少的约定降低团队学习成本。下面先说明基础思路，再给出可运行的代码。
一、为什么需要简化版CSS框架
在小型项目或内部系统中，引入完整的第三方UI框架常常带来冗余代码和定制成本。团队成员如果只用到其中两成组件，却要承担全部样式覆盖的风险。简化版框架把范围收敛到布局与基础样式，让任何人看完变量定义就能上手。
另一个现实问题是类名混乱。如果没有统一约定，有人写.left-red-btn，有人写.button--danger，后期维护非常痛苦。我们通过分层约定：重置层、原子层、辅助层，让样式职责清晰，新人也能快速理解。
二、样式重置与基础设定
任何CSS框架的第一步都是样式重置，目的是抹平浏览器默认差异。我们不使用激进的reset，而是采用温和的normalize思路，保留部分可用默认样式，仅统一盒模型与字体。
通过box-sizing: border-box让宽度计算更符合直觉，同时用CSS变量定义主题，后续换肤只需改一处。下面是一段基础重置代码，注意所有尖括号都已转义，可直接放入样式文件。
/* 基础重置 */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-base, system-ui, sans-serif);
font-size: var(--size-base, 14px);
color: var(--color-text, #333);
background: var(--color-bg, #fff);
}
a {
color: var(--color-link, #2d8cf0);
text-decoration: none;
}
三、原子化工具类设计
原子类是指功能单一、命名直观的样式类，例如.mt-10表示上边距10像素。它最大的好处是写页面时少写内联样式，也避免创造大量一次性类名。我们限制原子类只覆盖间距、排版与显示状态。
为了防止数值发散，间距统一使用4的倍数阶梯：4、8、12、16、24。下面给出常用原子类示例，实际项目可用预处理器循环生成，但这里手写展示更易懂。
/* 间距原子类 */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-12 { margin-bottom: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
/* 布局原子类 */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
/* 文字 */
.text-sm { font-size: 12px; }
.text-muted { color: #888; }
四、辅助组件与命名约定
除了原子类，我们提供极少量的辅助组件，比如卡片与按钮，用于统一视觉。组件类使用.c-前缀，明确区分于原子类，避免混淆。这样在HTML里一眼能看出哪些是工具类，哪些是业务组件。
以下卡片组件仅包含基础边框与圆角，具体内容样式仍由原子类组合完成，保持框架薄而实用。这种组合方式比写死大型组件更灵活。
<div class="c-card p-16"> <h3 class="mt-0 mb-8">标题</h3> <p class="text-muted mb-0">描述内容</p> </div>
五、目录结构与使用建议
推荐将框架文件拆分为base.css、utilities.css、components.css三个文件，在入口处按顺序引入。base负责重置与变量，utilities负责原子类，components负责少量组件。
团队落地时，先由一人写好框架，其他人严格只使用已有类，遇到缺失再补充到对应文件。这样既能保持一致性，又不会陷入无休止的样式争论。半年后回看，代码依然清晰易改。
| 文件 | 职责 | 是否允许业务修改 |
|---|---|---|
| base.css | 重置与CSS变量 | 仅管理员 |
| utilities.css | 原子类 | 按需增补 |
| components.css | 基础组件 | 谨慎扩展 |
六、常见误区与规避
简化框架最容易被误用成“内联样式搬家”，即在HTML写十几个原子类导致结构混乱。此时应提取一个语义化辅助类，而不是无限堆砌。另一个误区是过早抽象，项目初期不需要把每个间距都做成类，用到再补即可。
当发现某个组合出现三次以上，就用.c-组件或语义类收编。这样框架随业务自然生长，既不臃肿也不受限。掌握这个节奏，小型CSS框架就能长期易学适用。