如何理性看待Tailwind和styled-components争宠React
Posted 「零一」
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何理性看待Tailwind和styled-components争宠React相关的知识,希望对你有一定的参考价值。
几天前,我发表了一篇新的博文,详细介绍了我使用styled-components
的经验,以及如何将动态样式整合到 js 域中,避免使用 CSS 文件。后来我发现了另一种将样式整合到应用程序中的方法… 那就是 TailwindCSS。
我以前看过一些关于这个的讨论,也看过很多关于 TailwindCSS 的视频和帖子,但是没有多想。因此,既然有人再次告诉我这件事,我也想尝试一下,这样我就可以比较我的经历了。我决定利用TailwindCSS
建立一个网站。
Tailwind初识
为了让你开始并理解本文,以下几点非常重要:
- TailwindCSS 是一个充满预构建类的包,可以对组件进行样式化,但是,它们非常灵活,您可以用它们做任何事情
- 你不需要知道 CSS 就可以使用 TailwindCSS
- TailwindCSS 使用了大量的缩写,例如(pb 是 padding-bottom) ,所以当你不确定的时候,阅读文档并使用它的搜索功能是很重要的
Tailwind更像是bootstrap吗?
我不得不说我对TailwindCSS
的最初印象是挺不错的。它使用了很多引导程序的语义,并且几乎扩展了很多,以至于你永远不必使用直接的 CSS 中的媒体查询来切换样式的差异。相反,你可以这样做:
<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
Hello world
</div>
对于那些以前使用过样式框架的人,如 Material UI
,Bootstrap
等。你需要了解这些不同的媒体断点(sm
、md
、lg
等)的用法。
这基本上相当于是在说:
- 当我的设备尺寸小于
sm
时,设置padding-bottom
为10
; - 当我的设备尺寸很小(sm)或更大时,设置
padding-bottom
为12
; - 当我的设备大小为中等(md)或更大时,设置
padding-bottom
为8
; - 当我的设备大小比较大(lg)或更大时,设置
padding-bottom
为4
。
我必须说,我花了一段时间才真正理解这样一种技术,即不存在x
断点,这是你通常会在 bootstrap 中找到的例子。简单地说,任何低于 sm
的设备都会继承TailwindCSS
类,而不会像上面的 “pb-10”
那样有一个媒体断点。
Tailwind会造成大量的class类吗?
Tailwind
确实会使你的标签看上去有很多的 className
,这点确实够扫兴的。在每个元素上都添加大量的 class
类最终容易导致巨大的 class
属性值,也容易导致无用的class
留存在不需要的元素上等等现象。有一种很好的处理办法就是使用一个 classNames
包,用来将这些类名都组合在一起,并且允许你将元素的格式设置得更清晰一些
例如这个样子:
module.exports =
theme:
// ...
fontSize:
xs: ['0.75rem', lineHeight: '1rem' ],
sm: ['0.875rem', lineHeight: '1.25rem' ],
base: ['1rem', lineHeight: '1.5rem' ],
lg: ['1.125rem', lineHeight: '1.75rem' ],
xl: ['1.25rem', lineHeight: '1.75rem' ],
'2xl': ['1.5rem', lineHeight: '2rem' ],
'3xl': ['1.875rem', lineHeight: '2.25rem' ],
'4xl': ['2.25rem', lineHeight: '2.5rem' ],
'5xl': ['3rem', lineHeight: '1' ],
'6xl': ['3.75rem', lineHeight: '1' ],
'7xl': ['4.5rem', lineHeight: '1' ],
'8xl': ['6rem', lineHeight: '1' ],
'9xl': ['8rem', lineHeight: '1' ],
,
,
与styled-components相比,Tailwind如何?
关于 styled-components
,我真正喜欢的一点是它使你的组件看起来非常得简单。比如你能够创建一个样式化的 div
并引用它:
import styled from 'styled-components'
const Wrapper = styled.div`
padding-bottom: 10px;
@media (min-width: 768px)
padding-bottom: 20px;
`;
const TestComponent = () => (
<Wrapper>
Hello world!
</Wrapper>
);
在我看来,这种方式使得组件保持干净和整洁,允许我们在写组件时更注重逻辑而不是外观。你甚至可以更进一步将样式抽出成一个单独的 js
文件,抽象成组件的作用域。然而,让我们看看这个在 Tailwind
中是什么样子的:
const TestComponent = () => (
<div className="pb-10 md:pb-20">
Hello World!
</div>
);
正如你看到的,Tailwind
实际上减少了我们为实现相同目标而编写代码的行数。这就是有效的 class
类方法的意图。它确实简化了样式化元素的编写,然而,这对于我们的元素来说是非常友好的,因为它只有少数几个样式。让我们来看看样式更为复杂的组件的比较:
- styled-components
const Button = styled.button`
font-size: 1rem;
margin: 1rem;
padding: 1rem 1rem;
@media (min-width: 768px)
padding: 2rem 2rem;
border-radius: 0.25rem;
border: 2px solid blue;
background-color: blue;
color: white;
`;
const TestComponent = () => (
<>
<Button>
Hello world!
</Button>
</>
);
- Tailwind
const TestComponent = () => (
<div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500">
Hello World!
</div>
);
从上面的比较可以看出,由于我们的组件的样式规则在不断发展,styled-components
现在确实更加优秀。Tailwind
却使得 className
如何冗长,而且如果不使用 className
类名这样的包的话,它确实会使我们的代码行比应有的长很多。在我看来,这是 Tailwind
最大的败笔之一。
特别是,如果你在进行多人开发,那么 styled-components
可以使你很轻松得读取一个组件的样式。与 Tailwind
相比,你可能必须要在文档中查找一些工具类来理解这些值的含义
将这个例子与第一个例子比较,Tailwind
只是号称简单,后续的例子只包含了复杂而且高风险的代码。只是让多个开发人员同时处理少数几个组件样式,却很容易出现问题,然后他们需要花更多的时间去找出根本因素,从而删除特定的工具类。在我看来,与仍然依赖原始的CSS更改的styled-components
相比,管理起来容易得多
styled-components和Tailwind哪个更优秀?
老实说,我不认为这两者是相辅相成的。这两者都有它们各自的优点和缺点,并且在本文也进行了验证。
我想说的是,如果你正在想办法寻求一种快速的方式快速建站或生成一个单页面(即不复杂的页面),那么 Tailwind
可能非常适合你。这主要是因为你可以从该框架中获得大量的实用的 class
来设计样式。
但是,如果你的目标是开发一个更长期的项目,并且要求容易维护,那么我建议采用styled-components
,因为在我看来,它们在维护样式时具有更“健壮”的感觉。然而,我并不是这两方面的专家,我只是简单地构建了这两种技术,这些也是我最初的想法。
友情链接
强烈推荐
给你们推荐一下我的个人博客,拥有大量优质文章、面试宝典、算法精选,欢迎访问~
以上是关于如何理性看待Tailwind和styled-components争宠React的主要内容,如果未能解决你的问题,请参考以下文章