引入新的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中创建额外的和有争议的“不必要的”元素是否会导致显著的速度/性能/或其他问题？

Answer 1

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

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

<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，我刚刚学会了如何处理它。为了帮助某些元素具有多个类，我试着养成自己对相似类进行分组的习惯。例如，我将所有与边距相关的类放在一起，所有与填充相关的类放在一起，等等。这样，如果我正在扫描一个特别长的类列表，寻找与边距相关的东西，如果我只看到mb-4，我知道这将是唯一的边距类，而不必再往下看。

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

希望这能有所帮助！