转自:谈一谈对 TailwindCSS 的看法
作者:山月
链接:https://www.zhihu.com/question/337939566/answer/1752928891
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者:牛铁柱明天见
链接:https://www.zhihu.com/question/337939566/answer/1693039814
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
什么是Tailwind CSS
---就是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma。一样。将一些css样式封装好,用来加速我们开发的一个工具。
---CSS发展到现在,基本经历了三个阶段:
-
第一个阶段,原生写法, 是类似于编程中面向过程的写法,需要什么样式,自己在css中写什么样式。对代码有洁癖的程序员会进行简单的css复用。但是也只是简单的复用,大多数时候还是需要什么写什么,想怎么写怎么写。
-
第二个阶段,CSS组件化。类似于编程中面向对象的写法,将相同视觉的UI封装成一个组件。比如一个按钮,整个项目中,这个按钮被多次使用,并且样式一致。那么就可以封装成一个按钮类。使用的时候直接使用这个类名称就OK。这也是bootstrap,element ui,Antd,bulma的做法。这种框架的优势在于,封装了大量常见的UI。比如你需要一个表单,,需要一个导航,需要一个弹窗,Card卡片。有现成的class。直接拿过来用,就可以快速的完成效果。完全不需要动手写css。这也是目前比较流行的方法。这几年几乎很少有项目是自己一点一点手写样式的了,多多少少都会使用到一些css框架。对于一些需要快速交付的项目,非常适合使用这种组件化css框架。
-
第三个阶段,CSS零件化。也叫做CSS原子化。和上面第一个阶段第二个阶段都有类似的地方。依旧是组件,只是每个组件都是一个单一功能的css属性。上面第一个阶段的时候,我们讲了有些有对代码有追求的人,会开始复用css。比如页面中大量的用到
float:left
。那么就可以封装一个类,比如是这样.left {float:left}然后需要使用float:left
的时候,直接使用.left
就可以。但是我们自己写css的时候,仅仅是封装一些常用的简单的类,绝大多数的css,都需要动手去写css。比如你要写个宽度12像素。你就得老老实实的去写width:12px
,逃避不了,不过估计也没人想过逃避。
Tailwind CSS就是第三个阶段的产物,它做了什么呢?它将所有的css属性全部封装成语义化的类,比如你想要一个float:left
,它已经帮你封装好了,你直接使用一个float-left
就可以。需要一个宽度为12像素,只需要写w-3
就可以。
一些问题的解答
Q1: 这和行内 CSS 有何区别,不就少写几个字吗?
大部分人的想法应该是这样的: 仅仅对于 text-center
而言,虽然提供了些许方便,但是不足以拉开差距。
如果说它仅仅是简单的原子化 CSS,好用却不亮眼。但是它却不仅仅止于此。
1. 方便性: text-center
、grid-cols-3
或许一个 text-center
不足以使你觉得提供了多大的方便性,但对于一个三等分的 Grid 属性来说,一个 grid-cols-3
和 shadow
绝对方便
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
或者你还能记得 box-shadow
各个位置的参数吗? 我敢保证看这篇文章的人至少有 93% 说不上来
在 tailwind 中,直接用 .shadow
简单方便
.shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
2. 语义化: text-lg
、text-white、
ring、
animate-spin`
text-lg
,一个较大字体,如果设置行内样式,肯定有诸多麻烦的事: 我想设计一个较大的字体,那我应该设计多大尺寸、使用什么单位
同样还有:
-
text-white
: 白色的色值是哪个来着? -
ring
: 我想给这个按钮加一个圈圈? -
animate-spin
: 怎么做一个动画?
3. 约束性: bg-gray-500
、text-lg
、p-4
新人总容易弄出一种大红大绿的新人风格网页,有了一些约束就很难出现这种很糟糕的色彩控制
另外,有了 text-lg
此类,一个页面上就不会出现几十种参差不同的字体大小
4. 响应式:
先来看一个在工作中会遇到的响应式布局问题,这也是我上一次在头条面试时的一道题目
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
通过 grid
布局很容易实现,但未免繁琐
@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;
}
那使用 tailwind
呢? 只要一行,就问你高效不高效
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
5. 修饰符
把修饰符,如各种伪类、暗黑模式、响应式设计至于前缀的设计简直深得我心
<div class="focus:ring-2 hover:bg-red-700 dark:bg-gray-800"></div>
Q2: 既然 TailwindCSS 这么好用,那岂不是可以摆脱手写 CSS 了
很遗憾,不能。不过虽然你无法摆脱手写 CSS,但是你基本上也写不了几行,说以下几种很常用的情况
1. 复杂选择器
当父级元素鼠标悬浮时的,子级元素的样式控制
.container:hover .item {
}
2. CSS function
.body {
height: calc(100vh - 6rem)
}
3. 多种属性复用
.item {
@apply p-2 border-b flex justify-between font-mono;
}
Q3: 造成新的记忆负担
这个问题就仁者见仁智者见智了,在 Vue 的 template
语法中也经常出现此类问题,很多人会对一些命名上的约定,特别是自己不太喜欢的约定天然排斥,这也无可厚非。
我在初期确实会一边开发网页,一边瞅着文档全局搜索: TailwindCSS 属性查找,现在借助浏览器插件及熟能生巧的经验已经不太需要翻文档了
初期经常花时间翻文档而不手写 CSS,而其中的原因不外乎两个:
- 多写几个字母,确实有点嫌麻烦,有这时间还不如看看文档,全局搜索下也不费事
- 自己设置一个 fontSize,padding、margin 实在不知道设置多少尺寸,tailwindcss 有较大的约束
过了多久就会觉得: 嗯,真香
Q4: 仅仅是实现一个原子化的 CSS,怎么这么多 Star?
因为他确实比较方便,算是解决了痛点。而且 Star 也和功能复杂度无关
使用 Gihub Star 数和 npm 周下载量来表明一个库的受欢迎程度,那么你会发现有的库只有几十行,下载量比 React/Vue/Angular 加起来都要多
- mime: 获取 Mime Type。几十行代码,每周 3700 万次下载,1.6K Star
- classnames: 根据条件连接 class 类名。一百几十行代码,每周 580 万次下载,13.5K Star
- js-cookie: 操作 cookie。一百多行代码,每周 200 万次下载,17K Star,但是在 Jsdelivr 每月有上亿次下载
-
ms:
ms('2 days')
可读性的时间转化为秒数。几十行代码,每周 7300 万次下载,3.3K Star - isMobile: 检测当前 web 环境是否为移动端。几十行代码,每周 15 万下载,2K Star
- isci
Q5: 初期很爽,但是后期维护困难,特别是人员调动后
我算是 TailwindCSS 中度使用者吧,目前还没有后期维护困难方面的困惑。甚至可以说,维护比以前的方案还要容易
至于调试,可轻松使用 chrome devtools
,还是可以一眼望到底的,而且没有以前各种 class 存在属性重复覆盖,造成调试困难
即使实在有过多的 CSS Class,也可以通过 Computed
面板中的小箭头跳转过去找到相对应的 class
Q6: 虽然 CSS 体积大幅降低,但是 HTML 体积却变大了
Facebook 经过重构后 CSS 体积已经从 413Kb 减至 74Kb。
gzip 的核心是 Deflate,而它使用了 LZ77 算法与 Huffman 编码来压缩文件,重复度越高的文件可压缩的空间就越大。
即使 HTML 因为类名过多造成体积增大,由于 class 高度相似,gzip 也将会得到一个很大的压缩比例。
三、谈谈我遇到的几个问题
Q1: PurgeCSS 有可能过多删除 class
tailwind 使用了 purgecss
删除无用的 class,但有时候会吧有用的 class 也给删掉。道理也很简单,它并不能动态执行代码,你计算后的 class 他不认识就给你删了
比如:
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
所以我强烈推荐使用 classnames
上面这段在文档里有描述: 如何正确书写能够被 purgecss 识别的样式
Q2: 样式覆盖问题
以下 red 与 blue 两个样式哪个会生效?无法确定。
<div class="red blue"> </div>
class
在样式表中的顺序决定,而非在 class 中的先后顺序。这使得通过 className 扩展样式时遭遇问题,示例如下
import cx from 'classnames'
function Input ({ classname }) {
// 默认居中,提供外层扩展 class 的功能
return <input className={cx('text-center', classname)} />
}
function ExtendInput () {
// 扩展失败
return <Input className="text-left" />
}
实践
再来谈几个实践的点
与 classnames 搭配使用
classNames('text-center transition-opacity', showTip ? 'opacity-100' : 'opacity-0')
与 styled-jsx 搭配使用
此时样式由大量的 tailwind
及少量的 styled-jsx
组成。需要注意此时需要搭配 styled-jsx 的 postcss 插件使用
<style jsx>{`
.item {
@apply p-2 border-b flex justify-between font-mono;
}
`}</style>
网友评论