关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

原子化CSS详细介绍及原子化框架UnoCSS、Tailwind、Windi

发布2024-03-06 浏览282次

详情内容

所谓原子化 CSS ,指的是一种用于CSS的架构方式的理念,它倾向于 用途单一的 class,并 以视觉效果进行命名。UnoCSS、Tailwind、Windi 是流行的原子化css 框架。

概述

本文介绍了 原子化 CSS 的相关背景概念、UnoCSS 的特点、用法。通过阅读本文,你可以了解如何使用 这款 CSS 引擎。

 什么是原子化 CSS

所谓 原子化 CSS ,指的是一种用于CSS的架构方式的理念,它倾向于 用途单一的 class,并 以视觉效果进行命名。例如 bootstrap 的颜色系统,为我们提供了直观的颜色名称:

image.png

那什么是原子化 css?

我们平时写 css 是这样的:

<div class="aaa"></div>
.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}

在 html 里指定 class,然后在 css 里定义这个 class 的样式。

也就是 class 里包含多个样式:

image.png

而原子化 css 是这样的写法:

<div class="text-base p-1 border border-black border-solid"></div>

.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

image.png

定义一些细粒度的 class,叫做原子 class,然后在 html 里直接引入这些原子化的 class。

这个原子化 css 的概念还是很好理解的,但它到底有啥好处呢? 它解决了什么问题?

口说无凭,我们试下 tailwind 就知道了,它就是一个提供了很多原子 class 的 css 框架。

我们通过 crerate-react-app 创建一个 react 项目:

npx create-react-app tailwind-test

然后进入 tailwind-test 目录,执行

npm install -D tailwindcss
npx tailwindcss init

安装 tailwindcss 依赖,创建 tailwindcss 配置文件。

image.png

tailwind 实际上是一个 postcss 插件,因为 cra 内部已经做了 postcss 集成 tailwind 插件的配置,这一步就不用做了:

image.png

然后在入口 css 里加上这三行代码:

image.png


点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载