前端 CSS 经典:CSS 原子化

前言:前端有很多种 CSS 的解决方案,其中有 CSS Modules、BEM、CSS In Js、CSS 原子化。这章先理解下 CSS 原子化。

1. 什么是 CSS 原子化

提供一系列的助记词,用类名来代表样式。相当于用一两行定义一个类名,不能再分解了。这就叫 CSS 原子化。如下:

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

2. 好处

在样式上不会有重复代码。并且足够灵活适用于任何项目。我们后续写页面的时候,不用在 css 和 html 来回切换了。

3. 原子化工具

有哪些 CSS 原子化的工具呢。有 tailwind、windi、uno。目前最成熟的是 tailwind。

相关推荐

  1. 前端 CSS 经典CSS 原子

    2024-06-11 07:16:01       31 阅读
  2. 前端 CSS 经典:好用的 CSS 选择器

    2024-06-11 07:16:01       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-11 07:16:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-11 07:16:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-11 07:16:01       87 阅读
  4. Python语言-面向对象

    2024-06-11 07:16:01       96 阅读

热门阅读

  1. 移动端适配和响应式页面中的常用单位

    2024-06-11 07:16:01       32 阅读
  2. MongoDB 部署分片集群

    2024-06-11 07:16:01       24 阅读
  3. 华为FPGA工程师面试题

    2024-06-11 07:16:01       30 阅读
  4. 深度学习的点云分割

    2024-06-11 07:16:01       32 阅读
  5. ESP32连接xbox手柄

    2024-06-11 07:16:01       28 阅读
  6. OpenCV图像算术位运算

    2024-06-11 07:16:01       33 阅读
  7. rust 1.安装

    2024-06-11 07:16:01       34 阅读
  8. 大学生如何学习node.js?

    2024-06-11 07:16:01       28 阅读
  9. MYSQL

    MYSQL

    2024-06-11 07:16:01      31 阅读
  10. MacOS升级ruby版本

    2024-06-11 07:16:01       32 阅读
  11. GitHub工程git merge出现冲突处理方式

    2024-06-11 07:16:01       33 阅读
  12. PostgreSQL的视图pg_roles

    2024-06-11 07:16:01       31 阅读
  13. bexcel

    2024-06-11 07:16:01       29 阅读
  14. 需要安排几位师傅加工零件?c++

    2024-06-11 07:16:01       29 阅读