为什么我应该在自定义属性前加上“data-"? [英] Why should I prepend my custom attributes with "data-"?

问题描述

所以我使用的任何自定义数据属性都应该以data-"开头:

So any custom data attribute that I use should start with "data-":

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我忽略这一点会发生什么不好的事情吗?即:

Will anything bad happen if I just ignore this? I.e.:

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一件坏事是我的自定义属性可能与具有特殊含义的 HTML 属性(例如 name)发生冲突，但除此之外，仅写入example_text"是否存在问题的数据示例_文本"?(它不会验证，但谁在乎呢?)

I guess one bad thing is that my custom attributes could conflict with HTML attributes with special meanings (e.g., name), but aside from this, is there a problem with just writing "example_text" instead of "data-example_text"? (It won't validate, but who cares?)

推荐答案

保持自定义属性以 data-* 为前缀有几个好处.

There are several benefit for keeping custom attributes prefixed with data-*.

1. 它保证在未来的版本中不会与 HTML 的扩展发生任何冲突.这是在 HTML5 中引入的一些新属性在某种程度上已经遇到的问题，其中现有站点使用具有相同名称的属性并期望不同且不兼容的自定义行为.(例如，input 元素上的 required 属性已知在过去在一些流行的网站上有一些冲突)

1. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)

有一个方便的 DOM API，HTMLElement.数据集，用于从脚本访问这些属性.现在大多数浏览器都支持.

There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.

它们清楚地表明哪些属性是自定义属性，哪些是标准化属性.这不仅有助于验证器允许他们允许任何带有 data-* 的属性，同时仍然对其他属性执行有用的错误检查(例如，捕捉错别字)，它还有助于使阅读它的人(包括人们)更清楚源代码的这一方面可以在原作者之后在网站上工作的人.

They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

这篇关于为什么我应该在自定义属性前加上“data-"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！