水平线：好的设计决策还是坏的设计决策？

Question

我有一个自定义控件，其中包含要选择的项目列表。我担心这些项目会混杂在一起，因为此列表中可能有许多不同类型的操作。

• 创建
• 编辑
• 查看

所以我添加了通过使用水平线将它们分组的功能。

我与某位同事合作，他认为水平线是一种糟糕的设计选择，并希望我将其更改为样式化的 DIV。除了它们易于实现外，我并没有真正的意见。我实现的HR样式很好看。

你怎么想？水平线是好还是坏的设计选择？

- Mike Fielden

Answer 1

不好的做法是仅仅为了添加水平分割线而使用div。相反，考虑将看起来像水平线条的线作为元素的边框来划分。这样语义上是正确的，因为您不会影响您正在创建的HTML文档的结构。

本文深入探讨了如何滥用div作为仅用于呈现的元素。虽然有时无法避免，但这不是其中之一。

- cgp

Answer 2

我倾向于在这一点上同意altCognito的观点，因为它们纯粹是呈现性的（至少在我迄今所见到的每一个例子中都是如此），所以应该通过CSS来应用。

可能会有: after {content: /* hr */;}选项，但是，老实说，当有border-bottom时，它可以视觉上提供相同的目的，为什么还要使用<hr /> ？

当然，如果您决定使用它，它们可以进行样式设置，尽管W3 Schools建议所有潜在的样式选项现在已过时。如果确实如此，并且不能“官方”地进行样式设置，则最好避免使用它。即使只是从保持样式表的有效性的纯正主义思想出发。

- David Thomas

Answer 3

HR 的唯一问题是它总是出现。我猜你的同事可能认为你并不总想显示 HR，使用 DIV 和 CSS 解决方案可以让某人在一个全局的 CSS 文件中删除或更改它。（尽管，这个 HR 也可以通过 CSS 控制）

Div+CSS 解决方案并不坏，但对于你描述的情况，使用 HR 解决方案也不错。在这种情况下，我只会选择方便的解决方案。

- David

---

是的，这是可选项，你不必使用它。 - Mike Fielden