开篇

在前端开发中，样式表（CSS）扮演着至关重要的角色，它定义了网页的外观和布局。然而，管理庞大的 CSS 代码库往往变得复杂而困难。为了解决这个问题，一种被称为 “CSS 原子化” 的技术应运而生。CSS 原子化通过将样式拆分为独立的、可复用的类名，提供了一种高度可定制且易于维护的方式来构建网页样式。本文将深入探讨 CSS 原子化的概念，并展示如何利用它提高前端开发效率。

什么是 CSS 原子化（Atomic CSS）？

CSS 原子化是一种将样式拆分成小块、原子级别的类名，并通过组合这些类名来构建网页样式的方法。每个类名只包含一个样式属性及其对应的值。通过在 HTML 元素上添加这些类名，可以实现对样式的精确控制。

代码示例：
假设我们有一个简单的按钮组件，需要定制其颜色、边框和边距。传统的方法是为每个样式属性创建一个类名，然后将它们应用于按钮元素。使用 CSS 原子化，我们可以将每个样式属性拆分为独立的类名，并根据需要组合它们。下面是一个示例：

1
2
3

<button class="btn bg-blue border-red p-2">Click me</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* CSS */
.btn {
  /* 共享样式 */
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

/* 背景颜色 */
.bg-blue {
  background-color: blue;
}

/* 边框 */
.border-red {
  border: 1px solid red;
}

/* 内边距 */
.p-2 {
  padding: 0.5rem;
}

在上述示例中，我们通过组合类名来定制按钮的样式。.btn 类名包含了共享的样式，如 display 和 border-radius。.bg-blue 类名定义了按钮的背景颜色为蓝色，.border-red 类名定义了按钮的边框为红色，.p-2 类名定义了按钮的内边距为 0.5rem。

优点

通过采用 CSS 原子化的方法，我们可以获得以下几个好处：

可重用性：原子级别的类名可以在不同的元素之间共享，减少了代码的冗余和重复。

精确控制：通过组合类名，我们可以精确地控制每个样式属性的值，使其适应各种不同的设计需求。

易于维护：将样式拆分为原子级别的类名，使得样式的修改和维护更加直观和简单。

开发效率：使用预定义的类名，开发人员可以更快速地构建样式，减少了样式编写的时间成本。

缺点

学习曲线：理解和使用原子化 CSS 可能需要一些学习曲线。由于需要记忆和组合大量的类名。

可读性和维护性：尽管原子化 CSS 的类名具有一定的语义性，但它们往往是非常简洁和抽象的，可能对其他开发人员或团队成员来说不够直观。这可能会影响代码的可读性和维护性，特别是在项目变得复杂时。

文件大小增加：由于每个类名只包含一个样式属性及其对应的值，因此需要大量的类名来表示不同的样式组合。这可能会增加 CSS 文件的大小，尤其是在应用了大量样式的情况下。

小结

CSS 原子化是一种强大的前端开发技巧，它通过将样式拆分为原子级别的类名，提供了一种高度可定制且易于维护的方式来构建网页样式。通过合理地组合这些类名，我们可以实现精确控制、代码的可重用性和更高的开发效率。

框架

了解了CSS原子化的概念后，可以知道对于在一个应用或多个应用中使用该方案的话，需要有一套灵活和全面的css文件作为积累，同时并不是所有的css类都会在项目中使用，
这样就会产生大量的多余代码，不利于控制项目的尺寸。

针对上面的限制，目前已经产出了几个CSS的框架，通过特定的规则来避免限制，并保留CSS原子化的优点

Tailwind CSS

本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。

  • 它是基于postcss进行扩展，可以说它是postcss的一个插件。
  • 封装了常用的css属性，每一条css属性就是对应一个class的名字

安装（基于vue）

安装依赖

1
2
3
4
5
6

# 安装依赖
npm install -D tailwindcss postcss autoprefixer
# 初始化 主要会生产 tailwind.config.js 文件
npx tailwindcss init

创建postcss配置文件 postcss.config.js

1
2
3
4
5
6
7
8
// postcss.config.js 文件
module.exports = {
  plugins: {
    tailwindcss: {}, // 使用tailwindcss
    autoprefixer: {}, // 这个是补充兼容性的前缀
  }
}

修改 tailwind.config.js 文件

1
2
3
4
5
6
7
8
9
10

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,html,js}"], // 在这个选项范围内的文件都会被扫描，用于确定使用到了哪些类名，最后在 NODE_ENV 为 production 的情况下，构建生成的样式表只会留下用到的样式v
  theme: {
    extend: {},
  },
  plugins: [],
}

引入css文件

1
2
3
4
5
6

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

1
2
3
4
5

// main.js

import "./css/global.css"

开启监听代码变化自动编译

主要是通过cross-env 设置环境变量 TAILWIND_MODE=watch

1
2
3
4
5
6

// package.json
"scripts": {
    "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve",
}

编码

tailwindcss 按照功能对部分类名进行缩写，需要有一定的记忆成本，比如以下(仅列举部分，具体可在快速查询网页进行查询)：

Box Sizing

ClassName 编译结果
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Display

ClassName 编译结果
block display: block;
flex display: flex;
inline-flex display: inline-flex;

以上仅列举部分，但是写法都是这样的

Overflow

ClassName 编译结果
overflow-auto overflow: auto;
overflow-hidden overflow: hidden;
overflow-visible overflow: visible;
overflow-x-hidden overflow-x: hidden;

以上仅列举部分，但是写法都是这样的

Position

ClassName 编译结果
static position: static;
absolute position: absolute;

Top / Right / Bottom / Left

ClassName 编译结果
inset-0 top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset-x-0 left: 0px;
right: 0px;
-inset-y-10 top: -10px;
bottom: -10px;
top-10 top: 10px;
-top-10 top: -10px;

响应式查询

默认提供了一下几个尺寸的代表

前缀 最小宽度 CSS代码
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

在配置文件中的如下配置可以添加自己的配置

1
2
3
4
5
6
7
8
9
10
11
12
13

theme: {
    screens: {
      // 前缀名: 实际代码值,
      p2x: "300px", // 这是自己添加的
      sm: "640px", // 也可以修改官方定义好的
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
}

1
<div class="w-full h-full bg-red-600 p2x:bg-green-900 sm:bg-black md:bg-gray-300 lg:bg-blue-900"></div>

上面的div在不同的屏幕宽度下，颜色也不一样 官网例子

特殊选择器（Hover, Focus等）

通过一下方式 hover:className进行指定如下面的代码

1
2
3
<button class="bg-black-500 hover:bg-red-700 text-white ...">
  Hover me
</button>

具体可看官网例子

开发帮助

在vs code中，安装 Tailwind CSS IntelliSense 插件，即可拥有智能代码提示：自动补全、语法检查、悬停预览、语法高亮显示；