在页面上分开部分时，使用DIV或样式内容元素更好

Question

我们在代码审查中，正在查看以下标记，该标记本质上具有以下标题以下内容：

：

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

我们被告知这是超级糟糕的练习，相反，您应该用边框上衣为h3元素定型以避免分裂性炎。这是真的？我知道不想用吨和吨的divs填充您的标记，但是，在这种情况下，我看不到太多问题。同样，在这种情况下，要获得相同的设计，与原始divider类相比，h3上需要的css线多。因此，尽管您节省了标记，但您并没有保存样式。另一个选择是将h3包装在div中，因此没有空标记。最后，我觉得这只是偏好吗？

想法？

Answer 1

取决于您的页面布局。通常，空白元素不会引起分裂性：

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

使得在许多前端框架中，默认情况下，系统嵌入了这些类型的元素。最后，这取决于页面的结构以及页面和软件的目的。这可以从不同的角度看到：如果您的设计除了其他地方的标题外，还可以使用分隔线，那么最好使用以下结构，因为这将保持您的手：

<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;
}

Answer 2

使用类似的东西是不良练习，我坚信。

HTML已经具有一个称为<hr/>的内置水平分隔线("水平规则"的缩写(。Bootstrap样式这样：

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

您可以根据需要进行自定义并使用它。

Answer 3

这确实取决于您是否正在使用CSS框架/库以及是否与团队合作。您需要编写可理解且可预测的代码，其余的团队将能够接收并进行工作。如果<div class="divider"></div>是每个框架的标准方式，那么我将继续使用它。

i也不会考虑这种"分裂性"，因为通常是指大量嵌套 <div>元素。例如

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

编辑：正如其他人所提到的那样，我应该包括的是，在涉及框架和/或团队以外的其他情况下，不使用规格元素通常被认为是不良习惯。在这种情况下，<hr />