仅出于对相关CSS类进行分组的目的而引入新的div

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，则不必费心将CSS提取到一个唯一的类中。如果在网站的每个页面上都需要.hero类，则可以创建HTML组件或CSS组件。

希望有帮助！