为什么 CSS 与假元素一起工作？

Question

在我的课堂上，我在玩弄并发现 CSS 可以处理虚构的元素。

例子：

 imsocool {
    color:blue;
}

 <imsocool>HELLO</imsocool>

当我的教授第一次看到我使用它时，他对虚构的元素起作用感到有点惊讶，并建议我将所有虚构的元素简单地更改为带有 ID 的段落。

为什么我的教授不希望我使用虚构的元素？他们有效地工作。

另外，他为什么不知道存在合成元素并可以使用 CSS。它们不常见吗？

原文由 Jordan ChillMcgee Ludgate 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为什么 CSS 与假元素一起工作？

（大多数）浏览器被设计为（在某种程度上）与未来添加的 HTML 向前兼容。无法识别的元素被解析到 DOM 中，但没有与之关联的语义或专门的默认呈现。

当一个新元素被添加到规范中时，有时 CSS、JavaScript 和 ARIA 可用于在旧浏览器中提供相同的功能（并且这些元素必须出现在 DOM 中以便这些语言能够操纵它们以添加该功能).

（ 自定义元素 有规范，但它们有特定的命名要求，需要使用 JavaScript 注册。）

为什么我的教授不希望我使用虚构的元素？

• HTML 规范不允许它们
• 它们可能会与未来的同名标准元素发生冲突
• 可能存在更适合该任务的现有 HTML 元素

还;为什么他不知道存在合成元素并可以使用 CSS。它们不常见吗？

是的。人们不使用它们是因为它们存在上述问题。

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

长话短说

• 自定义标记在 HTML 中无效。这可能会导致渲染问题。
• 由于代码不可移植，因此使未来的开发更加困难。
• 有效的 HTML 提供了很多好处，例如 SEO、速度和专业性。

长答案

有 一些论点 认为带有自定义标签的代码更有用。

但是，它会导致无效的 HTML。这对您的网站不利。

有效 CSS/HTML 的要点 |堆栈溢出

• Google 更喜欢它，因此它有利于 SEO。
• 它使您的网页更有可能在您未测试过的浏览器中工作。
• 它使您看起来更专业（至少对某些开发人员而言）
• 兼容的浏览器可以呈现[有效的 HTML 更快]
• 它指出了一堆您可能错过的模糊错误，这些错误会影响您可能尚未测试的内容，例如页面的代码页或语言集。

为什么要验证 | W3C

• 作为调试工具的验证
• 验证作为面向未来的质量检查
• 验证简化了维护
• 验证有助于教授良好实践
• 验证是专业精神的标志

原文由 Dan Grahn 发布，翻译遵循 CC BY-SA 3.0 许可协议