阅读 2095

理性看待Tailwind和styled-components争宠React

本文已获得作者原创独家授权,并经过我的略微润色,翻译自:TailwindCSS vs Styled-Components in ReactJs

几天前,我发表了一篇新的博文,详细介绍了我使用styled-components的经验,以及如何将动态样式整合到 js 域中,避免使用 CSS 文件。后来我发现了另一种将样式整合到应用程序中的方法... 那就是 TailwindCSS。

我以前看过一些关于这个的讨论,也看过很多关于 TailwindCSS 的视频和帖子,但是没有多想。因此,既然有人再次告诉我这件事,我也想尝试一下,这样我就可以比较我的经历了。我决定利用TailwindCSS建立一个网站。

Tailwind初识

为了让你开始并理解本文,以下几点非常重要:

  1. TailwindCSS 是一个充满预构建类的包,可以对组件进行样式化,但是,它们非常灵活,您可以用它们做任何事情
  2. 你不需要知道 CSS 就可以使用 TailwindCSS
  3. 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 UIBootstrap 等。你需要了解这些不同的媒体断点(smmdlg 等)的用法。

这基本上相当于是在说:

  • 当我的设备尺寸小于sm时,设置padding-bottom10 ;
  • 当我的设备尺寸很小(sm)或更大时,设置padding-bottom12 ;
  • 当我的设备大小为中等(md)或更大时,设置padding-bottom8 ;
  • 当我的设备大小比较大(lg)或更大时,设置padding-bottom4

我必须说,我花了一段时间才真正理解这样一种技术,即不存在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,因为在我看来,它们在维护样式时具有更“健壮”的感觉。然而,我并不是这两方面的专家,我只是简单地构建了这两种技术,这些也是我最初的想法。

友情链接

文章分类
前端