html - 图标字体的 i 元素

Question

返回版本 2，Twitter Bootstrap使用过<i>分配图标字体的元素如下所示:

<a href='/foo'><i class='icon-heart></i> I love you foo</a>

最近建议使用多个类名而不是通配符选择器:[class^="icon-"]:before, [class*=" icon-"]:before现在我们有这样的东西:

<a class='icon icon-heart' href='/foo'> I love you foo</a>

我的问题是，由于以下原因，第二个 html 片段是否比第一个 html 片段性能更高？:

1. 少了一个 HTML 元素
2. 多个类名比通配符选择器更快

Answer 1

为什么你不应该不删除额外的元素

请注意，它不必是 <i>用于图标的元素，但问题的重点实际上是是否使用单独的元素(无论是<span>还是<i>或其他)，正如OP的评论所述“但是我的问题更多的是关于简化代码库以使用更少的元素。”

首先，bootstrap page您链接到的内容给出了以下警告(字体比此处大得多):

Don't mix with other components

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

这可能是因为它正在使用 :before其显示的伪元素，很容易与其他 :before 发生冲突引导框架的常规组件上的伪元素(或在自己的设计中)。

其次，图标通常旨在作为用户操作或用户反馈的交互式内容元素，而不仅仅是为了视觉吸引力。如果它是对于用户界面很重要的“内容”，那么它应该由真正的 html 元素表示为内容。

第三，如 Sirikon在删除的答案中指出(因为它并不是真正的完整答案，只是评论)，该元素允许在文本中的任何位置放置图标，而不仅仅是在文本内容“之前”(或“之后”) "，如果伪元素被切换)。因此可以将图标放置在文本中间。

第四，使用双类选择方法(即使在单独的元素上)，你的第二点是没有意义的。通配符选择器不以任何方式使用，我们没有单独的元素。

可能总会有一些异常(exception)

好吧，对于极端情况( as you noted in a comment )，您可能需要删除足够的 html 元素来查看页面加载时的性能变化(页面功能的性能变化不大)，但在大多数情况下，可能并非如此。

即使是这种情况，仍然需要评估上面给出的第一点到第三点的问题是否保证不删除这些元素。