引入新的 div 仅仅是为了分组相关 css 类

Question

在使用 https://tailwindcss.com/ 时，我经常会发现很多实用程序类都集中在一个元素上。在我看来，这使得代码有点不可读。示例：

<div className="container m-auto pt-2 px-4 flex items-center justify-between md:block md:relative">
    ...
</div>

在这个例子中引入新的 div 只是为了将相关的 css 类分组并使代码更具可读性是一个好习惯吗？例如像这样：

<div className="container m-auto pt-2 px-4 md:relative">
    <div className="flex items-center justify-between md:block">
        ...
    </div>
</div>

在 DOM 中创建额外的和可以说是 "unnecessary" 的元素是否会导致显着的速度/性能/或其他问题？

Answer 1

就我个人而言，我不会添加额外的 div 元素。据我所知，除非有大量的问题，否则它不会导致显着的速度或性能问题，但它似乎通过将元素相互嵌套来增加不必要的复杂性。

documentation 提供了一些提取组件的建议 - 要么提取您重复使用的 HTML 个组件，要么提取 CSS 个组件。提取 CSS 组件对我来说效果最好。文档中 .btn-blue 的示例完美地说明了我如何使用 TailwindCSS 来防止在重复使用的元素上出现 20 classes。

<button class="btn-blue">
  Button
</button>

<style>
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
</style>

如果你确实有一个一次性的 div 需要一堆 classes，我刚刚学会了处理它。为了帮助处理一些具有很多 classes 的元素，我尝试养成自己对相似 classes 进行分组的习惯。例如，我将所有与 margin 相关的 classes 放在一起，所有与 padding 相关的 classes 放在一起，等等。如果我正在扫描一个特别长的 [=36= 列表]es 对于与边距相关的内容，如果我只看到 mb-4 我知道这将是唯一的边距 class 而无需进一步查看。

Adam Wathan 提供了一些关于提取 CSS 组件的 additional thoughts。他所表达的对我很有效。如果我要在我的整个网站上有一个 .hero，我不会费心将那个 CSS 提取到一个唯一的 class。如果我需要在站点的每个页面上显示 .hero class，我会创建 HTML 组件或 CSS 组件。

希望对您有所帮助！

引入新的 div 仅仅是为了分组相关 css 类

Introducing new divs solely for the purpose of grouping related css classes

html

dom

tailwind-css