Question

我在代码中使用自定义HTML标记（<include>）。这是不好的做法，如果是这样，应该用什么来代替。

在我看来，它通过在标记名称中使用含义而不是<div class="include">来增加代码的可读性。

Answer 1

自定义HTML标记被误解了，实际上应该被视为最佳实践。

浏览器将下载并解析具有自定义或 unknown 标签的标记，而这些标记完全没有问题。浏览器还将使用您提供的CSS规则来设置样式。这是一个示例：

HTML

<my-alert status="success">Hello custom tags!</my-component>

CSS

my-alert[status="success"] { 
  color: white;
  background-color: green; 
}

前端世界为类疯狂（部分原因是旧的浏览器不能很好地处理未知标签*），因此，上述操作通常是这样的：

HTML

<div class="alert alert-success">Hello custom tags!</div>

CSS

.alert.alert-success { 
  color: white;
  background-color: green; 
}

两者的工作原理完全相同，但是自定义标签的设计与“自定义元素”规范保持一致，使用了熟悉的HTML构造（标签，属性，嵌套），并准备了这个小的静态Alert来演变为真正的“自定义元素”或“ Web组件”我认为自定义标签代码看起来比带有一堆类的非语义标签还要好。

这是更深入的说明（完整披露：我写的）https://developer.avalara.com/blog/2018/10/25/better-ui-components/

*当涉及未知标签时，旧的HTML 2.0规范并不是很容错，但值得庆幸的是，在HTML 4.01中，它发生了变化：

为了促进各种版本的HTML的实现之间的实验和互操作性，我们建议采取以下行为：

如果用户代理遇到无法识别的元素，则应尝试呈现该元素的内容。   如果用户代理遇到无法识别的属性，则应忽略整个属性说明（即属性及其值）。   如果用户代理遇到无法识别的属性值，则应使用默认属性值。   如果遇到未声明的实体，则应将该实体视为字符数据。

以供参考：https://www.w3.org/TR/html401/appendix/notes.html#notes-invalid-docs

Answer 2

现在创建自定义HTML标记非常好，但是，您需要知道如何正确创建它们，以获得更好的浏览器支持。确保它们具有“意义”或“角色”以提高可读性。使用Web组件时非常棒。

这是一篇关于创建自定义html元素的好文章： https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

Answer 3

最好采用div方式，而不是创建自己的标签。如果其他开发人员接管，它会为您的代码增加可读性，因为它被广泛接受。

这是关于这个主题的另一篇文章： Is there a way to create your own html tag in HTML5?

定义“自定义”HTML标记是不好的做法

3 个答案: