学习

原子类

2026-02-23/0/ 编辑

原子类

什么是原子类

原子类(也称为工具类)是只包含单个 CSS 属性的类,可以组合使用来快速构建样式。

基本概念

原子类遵循"一个类做一件事"的原则,每个类只负责一个 CSS 属性。

<!-- 传统写法 -->
<div style="margin: 10px; padding: 20px; background-color: red;">内容</div>

<!-- 原子类写法 -->
<div class="m-10 p-20 bg-red">内容</div>

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>原子类</title>
  <style>
    /* 间距原子类 */
    .m-10 { margin: 10px; }
    .m-20 { margin: 20px; }
    .p-10 { padding: 10px; }
    .p-20 { padding: 20px; }

    /* 颜色原子类 */
    .bg-red { background-color: red; }
    .bg-blue { background-color: blue; }
    .text-red { color: red; }
    .text-blue { color: blue; }

    /* 文本原子类 */
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }

    /* 字体原子类 */
    .font-bold { font-weight: bold; }
    .font-normal { font-weight: normal; }
    .font-large { font-size: 20px; }
    .font-small { font-size: 12px; }
  </style>
</head>
<body>
  <div class="bg-red text-center p-20 m-20">
    红色背景,居中文本
  </div>
  <div class="bg-blue text-left p-10 m-10 font-bold">
    蓝色背景,左对齐,粗体
  </div>
</body>
</html>

常见原子分类

1. 外边距

.m-0 { margin: 0; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-t-10 { margin-top: 10px; }
.m-b-10 { margin-bottom: 10px; }
.m-l-10 { margin-left: 10px; }
.m-r-10 { margin-right: 10px; }

2. 内边距

.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-t-10 { padding-top: 10px; }
.p-b-10 { padding-bottom: 10px; }
.p-l-10 { padding-left: 10px; }
.p-r-10 { padding-right: 10px; }

3. 颜色

.bg-red { background-color: #f56565; }
.bg-blue { background-color: #4299e1; }
.bg-green { background-color: #48bb78; }
.text-red { color: #f56565; }
.text-blue { color: #4299e1; }
.text-green { color: #48bb78; }

4. 文本对齐

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

5. 字体

.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-large { font-size: 20px; }
.font-small { font-size: 12px; }

6. 布局

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

7. 定位

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

8. 宽高

.w-100 { width: 100%; }
.w-50 { width: 50%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

实际应用

应用1: 卡片组件

<style>
  .border { border: 1px solid #ddd; }
  .rounded { border-radius: 8px; }
  .shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
<body>
  <div class="border rounded shadow p-20 m-20">
    <h3 class="m-0 mb-10">卡片标题</h3>
    <p class="m-0 text-gray">卡片内容</p>
  </div>
</body>

应用2: 按钮组件

<style>
  .btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-primary {
    background-color: #007bff;
    color: white;
  }
  .btn-success {
    background-color: #28a745;
    color: white;
  }
</style>
<body>
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-success">成功按钮</button>
</body>

应用3: 布局

<style>
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .flex { display: flex; }
  .justify-center { justify-content: center; }
  .items-center { align-items: center; }
  .gap-10 { gap: 10px; }
</style>
<body>
  <div class="container flex justify-center items-center gap-10">
    <div class="p-10 bg-red">盒子1</div>
    <div class="p-10 bg-blue">盒子2</div>
    <div class="p-10 bg-green">盒子3</div>
  </div>
</body>

应用4: 响应式

<style>
  /* 桌面端 */
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.33%; }

  /* 移动端 */
  @media (max-width: 768px) {
    .col-sm-12 { width: 100%; }
    .col-sm-6 { width: 50%; }
  }
</style>
<body>
  <div class="flex">
    <div class="col-md-4 col-sm-12">列1</div>
    <div class="col-md-4 col-sm-12">列2</div>
    <div class="col-md-4 col-sm-12">列3</div>
  </div>
</body>

命名规范

缩写

属性	缩写
`margin`	`m`
`padding`	`p`
`top`	`t`
`bottom`	`b`
`left`	`l`
`right`	`r`
`background-color`	`bg`
`text-align`	`text`

示例

.m-10 { margin: 10px; }
.m-t-10 { margin-top: 10px; }
.p-20 { padding: 20px; }
.p-b-20 { padding-bottom: 20px; }
.bg-red { background-color: red; }
.text-center { text-align: center; }

优缺点

优点

快速开发: 无需编写自定义 CSS
样式一致性: 保证样式统一
可组合性: 灵活组合使用
可预测性: 类名直接对应样式
减少 CSS 文件: 复用原子类,减少代码量

缺点

HTML 冗余: 需要在 HTML 中添加多个类名
可读性差: 类名不能表达语义
维护困难: 修改样式需要修改 HTML
文件大小: 原子类库可能很大

主流原子类框架

1. Tailwind CSS

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="...">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Integrating with Stripe</a>
      <p class="mt-2 text-slate-500">...</p>
    </div>
  </div>
</div>

2. Bootstrap Utility Classes

<div class="d-flex justify-content-between align-items-center p-3 bg-light">
  <div class="text-primary fw-bold">标题</div>
  <button class="btn btn-primary">按钮</button>
</div>

3. Tachyons

<div class="bg-white pa3 pa5-ns bt b--black-10">
  <h1 class="f4 f3-ns fw6 mb3">标题</h1>
  <p class="measure lh-copy">内容</p>
</div>

使用场景

适合使用原子类

快速原型开发: 快速搭建页面
响应式设计: 媒体查询和原子类配合
组件库开发: 结合组件使用
团队协作: 统一的样式规范

不适合使用原子类

大型项目: 维护困难
复杂组件: 样式复杂,不适合原子类
需要语义化: 类名无法表达语义

最佳实践

1. 结合传统 CSS

<style>
  /* 自定义组件 */
  .card {
    /* ... */
  }
</style>
<!-- 结合原子类 -->
<div class="card p-20 m-20">内容</div>

2. 提取常用组合

<style>
  /* 提取常用的类组合 */
  .card-basic {
    @extend .p-20;
    @extend .m-20;
    @extend .border;
    @extend .rounded;
  }
</style>
<div class="card-basic">内容</div>

3. 使用构建工具

使用 PostCSS 等工具自动生成原子类,只打包用到的类。

学习要点

概念: 一个类只做一件事,只包含一个 CSS 属性
优点: 快速开发、样式一致、可组合
缺点: HTML 冗余、可读性差、维护困难
命名规范: 使用缩写,如 m-10, p-20, bg-red
主流框架: Tailwind CSS、Bootstrap Utility、Tachyons
使用场景: 快速原型、响应式设计、组件库
最佳实践: 结合传统 CSS,提取常用组合

css