透明的<hr>用于响应式垂直间距:它真的是无意义的吗？

Question

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

1. <hr> 是一个自动关闭的标签,所以它在标记上很友好
2. 它的语义目的(根据MDN)是用一个部分来表示主题中断或主题转移.MDN还预先确定它现在用语义术语定义,而不是表示术语,这意味着<hr>只占空间的不可见不会反对元素的语义.
3. 跨浏览器很容易保持一致的风格
4. 我们可以在其中构建响应行为

我非常清楚标记和样式之间需要分离.然而,在响应式设计中,元素之间的垂直间距有时是繁琐的,并且在我看来,它通常比语义标记具有更高的价格.

一种常见的方法是使用手动样式处理特殊情况:当基于组件的类(如.my-special-recurring-element不够精确)(假设这个特定的类太靠近它下面的元素)时,请#special-element-that-requires-spacing手动添加id 并设置样式,这样就变成了很难维护:

/* 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 定义:

该hr元素表示一个段落级别专题突破,例如,在一个故事场景变化,或参考书的部分内的另一个话题的转变.

您可以hr以您喜欢的任何方式设置元素样式(包括使其透明),但不会影响其含义.但是你必须只用它来进行主题休息.

不要使用,hr因为你需要垂直空间.
使用hr是因为您有一个主题中断(您可以直观地表示垂直空间).

根据定义,任何其他用途都不是语义的.