div在页面上放置一个部分时，是使用 div 还是样式内容元素更好？

Question

我们正在进行代码审查，正在查看以下标记，它基本上有一个边框，可以将上面的一些内容与下面的标题分开：

<div class="divider"></div> <h3>Title</h3>

我们被告知这是非常糟糕的做法，您应该为 h3 元素设计带有顶部边框的样式，以避免出现 divitis。这是真的？我知道不想用成吨的 divs 来填充您的标记，但是，在这种情况下，我看不出有什么问题。此外，在这种情况下，为了获得相同的设计，h3 上需要的 css 行比原始 divider class 行更多。所以虽然你保存了标记，但你并没有保存样式。另一种选择是将 h3 包装在 div 中，这样就不会有空标记。最后我觉得好像这只是偏好？

想法？

Answer 1

使用这样的东西是不好的做法，我坚信这一点。

HTML 已经有一个名为 <hr/>（"horizontal rule" 的缩写）的内置水平分隔线。 Bootstrap 设置样式 like this:

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

您可以根据需要自定义它并在任何您想要的地方使用它。

Answer 2

这实际上取决于您是否使用 CSS 框架/库以及您是否将与团队合作。您需要编写可理解和可预测的代码，以便团队的其他成员能够学习和处理。如果 <div class="divider"></div> 是每个框架的标准方式，那么我会继续使用它。

我也会不考虑这个"divitis"，因为它通常指大量嵌套<div> 元素。如

<div class="foo">
    <div class="bar">
        <div class="baz">
            etc...

编辑：正如其他人提到的，我应该包括在内的是，在涉及框架和/或团队的情况下，不使用 spec 元素通常被认为是不好的做法。在这种情况下 <hr />

Answer 3

取决于您的页面布局。一般情况下，空白元素不会引起divitis:

<div class="divider"></div>
<h3>Title</h3>

因此在许多 front-end 框架中，这些类型的元素默认由系统嵌入。最后，这取决于您的页面结构以及页面和软件的用途。这可以从不同的角度来看：如果您的设计除了在其他地方的标题之外还使用分隔线，最好使用以下结构，因为这将使您的手保持开放：

<hr class="divider">
<h3>Title</h3>

但是如果这些分隔符仅限于标题而不在其他地方使用，您可以使用这样的结构：

<h3 class="border-top"></h3>
<h5 class="border-bottom"></h5>

和

.border-top {
    border-top: 1px solid black;
}
.border-bottom {
    border-bottom: 1px solid black;
}

div在页面上放置一个部分时，是使用 div 还是样式内容元素更好？

Is it better to use a div or style content elements when dividing a section on the page?

html

css

styling

semantics