CSS原子化

CSS 原子化

什么是 CSS 原子化

会提前定义很多 CSS 类，将 CSS 类的颗粒度细化到最小（所谓原子）。在需要样式时，在 html 写类名即可，不用再写 css 了。

1
2
3
4
5
6
7
<html>
	<body>
        <!-- 等价于 width:100%; height:100% -->
    	<div id="app" class="w-full h-full">
        </div>
	</body>
</html>

优势

  1. 设立了一种必须遵守的样式规范

每个项目其实都有约定的规范，但随着人员的流动、屡次的迭代，可能规范就丢失了，因为没有成熟的体系。

  1. 增加复用性，减小 css 体积

  2. 确实能提升开发速度（熟练的话）

  3. 减小起名复杂度

  4. 更方便的响应式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.conainer {
  display: grid;
  gap: 1rem;
}
1
2
<!-- 只要一行 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

劣势

  1. 学习成本较高

要记很多类。

  1. html 结构变得复杂，体积变大，难以调试（其实还好）

即使 HTML 因为类名过多造成体积增大，由于 class 高度相似，gzip 也将会得到一个很大的压缩比例（对于 gzip，重复度越高的文件可压缩的空间就越大）。

  1. 无法完全摆脱 css

一些情况下无法

  1. 样式覆盖问题

以下 red 与 blue 两个样式哪个会生效？无法确定。

1
<div class="red blue"> </div>

TailWind CSS

最常用的原子化框架

文档

https://www.tailwindcss.cn/docs/guides/vue-3-vite

vscode 插件

Tailwind CSS IntelliSense 自动补全、高亮错误等功能

purgecss

打包之后发现包体增加了很多，这是因为打包时直接打包了整个tailwindcss的缘故，引入purgecss之后，会自动去除没有使用的css,直接减少css的体积。

https://www.purgecss.cn/

参考

https://juejin.cn/post/7022810832379576357

https://www.qiyuandi.com/zhanzhang/zonghe/11209.html

CSS
CSS原子化
http://example.com/2022/11/17/CSS原子化/
Author
John Doe
Posted on
November 17, 2022
Licensed under