从 Tailwind 看 css 中的原子化流变


回不到的过去,忘不掉的人。某个路口,转角再次遇见,她还是她吗,你还是你吗?

禅意花园

禅意花园,做前端的人或多或少都听说过项目。一样的 HTML 结构,用不同的 css 去装饰,形成截然不同的页面风格,探索 css 之美。
html css 这一对欢喜冤家,谁是主,谁是客,一直没有定论。

关注点即世界

<div class='btn btn-primary'> // css 依附于 html
<div class='w50 h50 black mt30'>   // css 原子化

html-friendly

第一行,使用class修饰html,也就是html-friendly,样式服务于结构。class每一个是有多个css属性,这时候的代码也更接近于日常工作中的代码,但是这样的代码如果调整起来,我们经常是直接在现有的class上面修改,代码会越来越长,重复的逻辑也越来越多,如果项目一直在维护,那么css基本上会一直增大。毕竟,绝大多数时候,我们只在意功能的实现。

css-friendly

第二行代码,是上古时期 css 原子化的代表,推崇样式的复用。width:50px;height:50px;color:balck;margin-top:30px。每一个class都代表着一种 css 属性。原子化最早是雅虎提出来的,代表作是ACSS。ACSS 表示的是原子化 CSS(Atomic CSS),是 Yahoo 提出来的一种独特的 CSS 代码组织方式,应用在 Yahoo 首页和其他产品中。ACSS 的独特性在于它的理念与一般开发人员的理解有很大的不同,并挑战了传统意义上编写 CSS 的最佳实践,也就是关注点分离原则。ACSS 认为关注点分离原则会导致冗余、繁琐和难以维护的 CSS 代码。

ACSS 的原则是把 CSS 样式打散成尽可能小的部分,每个 CSS 类只对应一条样式规则,从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。

岁月的洗礼,原子化,似乎已经进入了历史的垃圾堆,不管是工作中还是开源框架里,很少能看到大规模使用原子化的项目(ACSS github 1.1k start),直到 tailwind 的诞生。

要有光

原子化虽然用的很少了,但是他的影子一直都在,项目里面pl10 mt5这种魔法写法一直都在。
现代化的前端开发,追求自适应,语义化,这些都不是传统原子化能够承担的。
tailwindcss,应运而生,扛起了 css 原子化的大旗。
主要优点:

  • 着眼于现代化前端,默认单位是 rem 而不是 px
  • 丰富的预设,预设字体大小,丰富的颜色
  • 响应式设计,提供一系列断点判断
  • 方便扩展,根据你的项目需要,自定义相关的原子类
  • 兼容各大框架,并有详细说明

是骡子是马

欧姆龙血压计数据分析,使用了tailwindcss作为基础。
pc

mobile

头部的响应式效果,下面是这部分代码:

<div class="relative h-96">
    <img class="w-full h-96 object-cover absolute" src="../assets/bg.jpg" />
    <div class="w-full h-96 bg-black absolute opacity-40"></div>
    <div
      class="w-full h-96 absolute flex flex-col  justify-center items-center"
    >
      <div class="font text-white text-center text-4xl  font-bold">
        欧姆龙血压计数据(CSV)解析工具
      </div>
      <Button class="mt-8" @click="upload">开始解析数据</Button>
    </div>
  </div>

瞥一眼w-full h-96 absolute flex flex-col justify-center items-center 这一大堆都是什么鬼东西…

width: 100%;
height: 96rem;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

如果你觉得这样写还是有点难看,可以这样写:

<div class='wrapper'>
.wrapper{
    @apply w-full h-96 absolute flex flex-col justify-center items-center
}

是不是感觉好那么一点点…几个class,完成了响应式布局,感觉还是很不错的,而且不用想一堆 class 命名。

真的那么好?

初见总是美好的,相处总是困难的。

  • 写px单位,要么换算成 rem,要么自定义属性
  • 需要新学一堆 class 语法
  • 要思考,对公共类进行抽象,定义,不能无脑写
  • 对 css 技能要求高,在 一堆的原子中,写一个用不到,或者不生效的 class 是不能被容忍的
  • 项目维护是个灾难,如果接手的人不熟悉这套模式,他会想你个傻x…

个人项目,天马行空,我的地盘我做主,Tailwind 用起来,小巧可人,甜而不腻。
公司项目,代码冗余并不是不能接收的事情,考虑到项目维护,暂不推荐。


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
docker 简易入门 docker 简易入门
拔一根毫毛,吹出猴万个。他叫孙悟空,也叫 docker。 docker 无所不能? 安装 wordpress docker run --name wordpress -p 8080:80 -d wordpress 安装 Nextc
2020-12-17 Yao
下一篇 
弱水三千,只取一瓢 —— git cherry-pick 弱水三千,只取一瓢 —— git cherry-pick
场景双主线的模式 AB,独自演进,存在一个共同的 bug,在 dev 上面修改好 bug 之后,需要合并到 AB 中,并且 A、B、dev 是一直在演进的,不能直接合并入 AB。 解决git checkout A // 切换到 A 分支 g
2020-12-03
  目录