Question

我已经开始使用一种技术来处理前端设计中的垂直间距，该技术对间距元素使用透明<hr>。我知道这归咎于大多数网络社区的仇恨，但我仍然认为这是处理特殊情况的好方法。以下是好处：

<hr>是一个自动关闭标记，因此它在标记上很友好
它的语义目的（根据MDN）是表示主题中断或主题的转换。 MDN还预先确定现在用语义术语定义，而不是表示术语，这意味着只占空间的不可见<hr>不会反对元素的语义。
很容易在浏览器中保持一致的风格
我们可以在其中构建响应行为

我非常清楚标记和样式之间需要分离。但是，响应式设计中元素之间的垂直间距有时候很繁琐，而且在我看来，它的价格往往高于语义标记。

一种常见的方法是使用手动样式处理特殊情况：当基于组件的类（例如.my-special-recurring-element）不够精确时（让我们说这个特定的类太靠近它下面的元素），添加一个id #special-element-that-requires-spacing并手动设置它，这很难维护：

/* Ensure that the special element is not too close to the footer in mobile */

#special-element-that-requires-spacing {
  margin-bottom: 1rem;
}

@media screen and (min-width: 640px) {
  #special-element-that-requires-spacing {
    margin-bottom: 0;
  }
}

这就是近年来诸如Tachyons和Basscss之类的CSS实用工具包变得越来越流行的原因。它允许使用内联类调整垂直间距，并具有直接响应处理的附加好处。我们现在可以像这样编写我们的HTML（Tachyons中的例子）：

<div class="my-special-recurring-element mb1 mb0-ns"></div>

其中.mb1大致意味着在我们的尺寸范围内应用1的边距底部而mb0-ns意味着在非小尺寸中应用边距为零的底部视口宽度。这对于前端设计来说肯定更实用，但它经常变得杂乱无章 - 在我看来 - 它比任何东西都更加蔑视标记样式分离。使用这样的工具包，我们经常会得到这样的标记：

<div class="ph2 pv3 pv2-m pv1-l mb2 mb2-ns"></div>

所以我们在这里所做的事情既实用又快捷，但却无法维持。它也没有帮助我们解决一个非常常见的用例：“我在哪里放置空间？我要为此添加padding-bottom吗？这是margin-top？哦，我需要删除移动设备上的填充，但这里的边距是非小的“等等。

输入<hr>空格。我们现在可以在我们想要分离的两个元素之间放置一个<hr class="space-1">，并且在元素之间具有一致，可读，可维护和语义的间距，这既不会混淆标记也不会混淆样式表。

hr.space-1 {
  background: transparent;
  color: transparent;
  margin: 0;
  height: 1rem;
}

@media screen and (min-width: 640px) {
  hr.space-1 {
    height: 1.5rem;
  }
}

@media screen and (min-width: 1200px) {
  hr.space-1 {
    height: 2rem;
  }
}

这真的是犯罪吗？你用这种方法看到了什么缺点？

Answer 1

以语义方式使用hr意味着根据其定义使用它。 HTML 5.1 defines：

hr元素表示段落级主题中断，例如，故事中的场景更改，或者参考书的某个部分内的其他主题的过渡。

您可以以任何您喜欢的方式设置hr元素的样式（包括使其透明），但不会影响其含义。但您只能将它用于专题中断。

请勿使用hr，因为您需要垂直空间使用hr，因为您有一个主题中断（您可以在视觉上用垂直空间表示）。

根据定义，任何其他用途都不是语义。

Answer 2

根本不是犯罪。我是用div和class来做的，但是你是对的，它在语义上是正确的＆＃34;用＆lt; hr＆gt;。有一个名为＆lt; spacer＆gt;的标签。它正是为了这个目的而服务的;我唯一的问题是＆lt; hr＆gt;是它只能添加垂直空间，它对水平情况不是很有用。但无论如何，这是一个罕见的案例。

HTML5对完全绝对语义标记仍然不完美;有破折号的标签可以解决这个问题，但是：

http://caniuse.com/#search=custom

......他们并没有得到真正的支持。还没。然而美丽的＆lt;垂直空间＆gt;标签就是，你现在就不能这样做。

所以不要害怕在代码中使用一些不那么语义的标记;随着HTML5支持的增加，它将很快发展。并且不要听标准或死亡的怪胎。他们处于暂时的学习状态。

Answer 3

这是犯罪吗？不，这是一个有效的HTML / CSS。

但是

语义不正确。 hr暗示（对于大多数Web开发人员）应该出现一些可视元素。如果您仅将其用作间隔符，请改用div。默认情况下它与hr相对，而其他人则更容易维护。

我甚至更喜欢使用br类而不是hr来元素空间。

不要低估大多数开发者不同意你的观点。要强调它，想象一下使用设计模式来解决与以往不同的问题。当试图了解您试图解决的问题时，它会让其他人感到困惑。

透明的<hr />用于响应式垂直间距：它真的是非语义的吗？

3 个答案: