响应式垂直间距的透明 <hr>：它真的那么不符合语义吗？
Transparent <hr> for responsive vertical spacing: is it really that unsemantic?
我已经开始在前端设计中使用一种处理垂直间距的技术，该技术对间距元素使用透明 <hr>。我知道这让大多数 Web 社区都讨厌我，但我仍然认为这是处理特殊情况的好方法。以下是好处：
<hr>是一个自闭标签，所以在标记上很客气- 其非常语义化的目的（根据 MDN）是 代表主题中断或主题转移[=56] =]. MDN 还明确指出，它现在 是用语义术语定义的，而不是表象术语，这意味着只需要 space 的不可见
<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;
}
}
这就是 CSS 实用工具包（例如 Tachyons and Basscss 近年来变得越来越流行的原因。它允许使用内联 类 调整垂直间距，并具有直接响应处理的额外好处。我们现在可以这样写 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>
所以我们在这里做的是实用和快速的，但无法维护。它也无法帮助我们解决一个非常常见的用例：“我应该把 space 放在哪里？我要为此添加 padding-bottom 吗？一个margin-top到这个？哦，我需要在手机上去掉这里的padding，但是这里的margin非小”，等等，等等
输入<hr>space。我们现在可以在我们想要分开的两个元素之间放置一个 <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;
}
}
真的有那么严重吗？您认为这种方法有哪些缺点？
这是犯罪吗？不，它是有效的 HTML/CSS。
但是
语义不正确。 hr 暗示（对于大多数网络开发人员）应该出现一些视觉元素。如果您只将它用作 spacer，请改用 div。与 hr 相反，它默认是透明的，并且其他人更容易维护。
我什至更喜欢使用 br 和 class 而不是 hr 到 space 元素。
不要低估大多数开发人员不同意您的观点这一事实。为了强调这一点，想象一下使用设计模式来解决与以往不同的问题。当试图理解你试图解决的问题时，它会让其他人感到困惑。
这根本不是犯罪。我会使用 div 和 class，但你是对的，使用
更 "semantically proper"。有一个名为 的标签，它正是用于此目的；我对
的唯一问题是它只能添加 vertical space，它对于水平情况并不是很有用。但无论如何，这种情况很少见。
HTML5 仍然不完美 完全和绝对语义 标记；有一些带有破折号的标签可以解决这个问题但是：
http://caniuse.com/#search=custom
...他们并没有得到真正的支持。还没有。无论 标签多漂亮，您现在做不到。
所以不要害怕在代码中使用一些 not-so-semantic 标记；随着 HTML5 支持的增加，它将很快发展。并且不要听 standard-or-die 那种怪胎。他们处于暂时的学习状态。
以语义方式使用hr意味着根据其定义使用它。 HTML 5.1 defines:
The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
您可以按照自己喜欢的任何方式设置 hr 元素的样式（包括使其透明），这不会影响其含义。但您只能将其用于 主题休息。
不要使用 hr 因为你需要垂直 space.
使用 hr 因为你有一个主题休息（你可以用垂直 space 在视觉上表示）。
根据定义，任何其他用途都不是语义的。
我已经开始在前端设计中使用一种处理垂直间距的技术，该技术对间距元素使用透明 <hr>。我知道这让大多数 Web 社区都讨厌我，但我仍然认为这是处理特殊情况的好方法。以下是好处：
<hr>是一个自闭标签，所以在标记上很客气- 其非常语义化的目的（根据 MDN）是 代表主题中断或主题转移[=56] =]. MDN 还明确指出，它现在 是用语义术语定义的，而不是表象术语，这意味着只需要 space 的不可见
<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;
}
}
这就是 CSS 实用工具包（例如 Tachyons and Basscss 近年来变得越来越流行的原因。它允许使用内联 类 调整垂直间距，并具有直接响应处理的额外好处。我们现在可以这样写 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>
所以我们在这里做的是实用和快速的，但无法维护。它也无法帮助我们解决一个非常常见的用例：“我应该把 space 放在哪里？我要为此添加 padding-bottom 吗？一个margin-top到这个？哦，我需要在手机上去掉这里的padding，但是这里的margin非小”，等等，等等
输入<hr>space。我们现在可以在我们想要分开的两个元素之间放置一个 <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;
}
}
真的有那么严重吗？您认为这种方法有哪些缺点？
这是犯罪吗？不，它是有效的 HTML/CSS。
但是
语义不正确。 hr 暗示（对于大多数网络开发人员）应该出现一些视觉元素。如果您只将它用作 spacer，请改用 div。与 hr 相反，它默认是透明的，并且其他人更容易维护。
我什至更喜欢使用 br 和 class 而不是 hr 到 space 元素。
不要低估大多数开发人员不同意您的观点这一事实。为了强调这一点，想象一下使用设计模式来解决与以往不同的问题。当试图理解你试图解决的问题时，它会让其他人感到困惑。
这根本不是犯罪。我会使用 div 和 class，但你是对的，使用
更 "semantically proper"。有一个名为
的唯一问题是它只能添加 vertical space，它对于水平情况并不是很有用。但无论如何，这种情况很少见。
HTML5 仍然不完美 完全和绝对语义 标记；有一些带有破折号的标签可以解决这个问题但是：
http://caniuse.com/#search=custom
...他们并没有得到真正的支持。还没有。无论
所以不要害怕在代码中使用一些 not-so-semantic 标记；随着 HTML5 支持的增加，它将很快发展。并且不要听 standard-or-die 那种怪胎。他们处于暂时的学习状态。
以语义方式使用hr意味着根据其定义使用它。 HTML 5.1 defines:
The
hrelement represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
您可以按照自己喜欢的任何方式设置 hr 元素的样式（包括使其透明），这不会影响其含义。但您只能将其用于 主题休息。
不要使用 hr 因为你需要垂直 space.
使用 hr 因为你有一个主题休息（你可以用垂直 space 在视觉上表示）。
根据定义，任何其他用途都不是语义的。