javascript - W3C、ECMAScript 或有关在 JavaScript 中向现有 HTML 类添加属性的专业建议？

Question

我有一个separate question询问是否可以命名媒体查询。到目前为止，这还没有答案。

所以现在我考虑在 JavaScript 中向媒体查询添加一个 name 属性。

我的问题是，是否有任何建议或理由不将我自己的自定义属性添加到对象上？

SO 的一项政策规定不要提出有争议的问题或类似问题，但这个问题是基于最佳实践和 W3C 建议的。这是一个有效的问题，我将解释原因。

人们将自己的自定义属性添加到 HTML 标记中，最终 W3C 对此提出了建议:“如果您想使用自己的属性，请在属性名称中添加破折号”。

<input data-my-attribute="my attribute value"/>

CSS 变量也发生了同样的事情，最终添加了它们，“要创建自己的 CSS 变量，请在变量名称前面添加两个破折号”。

.class {
   --my-css-variable-name: "my css value";
}

所以这个问题领域有一个历史。

那么对于将您自己的属性添加到现有类中，有什么建议吗？或者您对此有什么优点和缺点吗？

我显然知道，有一天类可能会向类添加一个同名的属性，或者有一天类对象可能不是动态的。

另一个例子，我在选择列表中有一个选项列表，我想向其中添加对数据对象的引用。现在，HTML 列表选项只有一个属性。

我想添加对相关对象的引用。

var list = document.getElementById("sizesList");

for (var i=0; i<sizeOptions.length; i++) {
  let option = document.createElement("option");
  let sizeOption = sizeOptions[i];
  let name = sizeOption.name;
  option.data = sizeOption;
  option.value = name;
  option.innerHTML = name;
  list.appendChild(option);
}

我的直觉告诉我，在 select Option 上添加数据属性很好，而向 mediaQuery 对象添加属性可能有一天会中断(但历史显示，在使用特定语法时，添加到标签或 CSS 的属性逐渐被接受)。

更新
以下是向 HTML 元素添加属性的示例:

Answer 1

W3C 对 custom data attributes 有这样的说法:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

所以，是的，只要您使用为此提供的工具，就可以在元素上存储任意数据。

<小时/>

W3C 对 CSS variables 有这样的说法:

This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document. This makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

因此 CSS 变量的目的是使样式设置更方便，但不是为了存储任意数据。 (尽管这并不妨碍您这样做。如果您可以将数据编码为字符串，则可以将其分配给 CSS 变量。)

<小时/>

据我所知，@media 并不是真正的集合，它更像是 CSS 的 if/then block 。 CSS @media 在 javascript 中并没有真正的表现。

window.matchMedia() 可以查询当前媒体状态，但返回的对象在每次调用时重新生成，并且不与任何特定的 @media 关联。 CSS。

document.styleSheets 与样式表集合相关联，本质上是文本文档，而不是某种 CSS 对象结构。

虽然您可以在每个 @media 中使用特定变量设置 :root，但该变量的值对于每个 @media 部分都不同，仅用于目的是检测哪一个处于事件状态，这似乎是一个等待发生的维护问题。