使用自定义 HTML 属性并使用 CSS 设置样式是一种不好的做法吗？答案

【问题标题】：Is it a bad practice to use custom HTML attributes and style them with CSS?使用自定义 HTML 属性并使用 CSS 设置样式是一种不好的做法吗？
【发布时间】：2014-03-28 04:05:11
【问题描述】：

这样创建 CSS 类有什么问题吗：

[test] { font: 13px; }

并在 HTML 属性中使用它：

<div test></div>

使用这种方法会影响某些浏览器的性能吗？我用 Mozilla Firefox 和 Google Chrome 测试过，它们似乎没有问题。

【问题讨论】：

为什么要避免上课？要使 [attribute] 在 IE8 和更早版本中工作，必须声明。使用类总是更容易更好
如果要使用自定义属性，请使用HTML5自定义数据属性，这是标准化的（在某种程度上）。
Custom attributes - Yea or nay? 的可能重复项

标签： html css

【解决方案1】：

您的自定义属性不是有效的 HTML。如果要将自定义数据放在元素上，则必须使用 data-* 属性。这使您正在做的事情不好。

此外，已经有一些 CSS 类可以满足您的需求，除非您的问题比您描述的要多。

【讨论】：

【解决方案2】：

虽然以这种方式应用样式没有问题，并且确保它在浏览器中有效，但您必须了解这不是应用样式的标准方式。

既然你也是从“实践”的角度提出的，那么，是的，这肯定不是正确的实践。这个想法是：HTML 用于定义要在浏览器窗口中显示的元素，CSS 用于应用需要应用于这些元素的任何样式，而 JavaScript 用于对其执行任何“操作”。所以，从实践的角度来看，这肯定是不好的做法！

另一方面，为什么不愿意创建一个类并将其应用于 div？毕竟，这个类可以在需要时重用。如果你只需要一次，那为什么不创建一个 id 选择器呢？

HTML：

<div class="rightApproach">The right way of applying styles</div>

CSS：

.rightApproach { color:Red; }

查看这个小提琴，您可以在其中看到您的方法以及应用样式的正确方法，无论是类选择器还是 id 选择器。

http://jsfiddle.net/JkRPt/

【讨论】：

【解决方案3】：

最好使用类。这种方式不适用于旧浏览器，也不专业。但是它没有任何性能问题。

【讨论】：

【解决方案4】：

HTML:
<div class="test">

CSS:
.test { font:13px; }

使用类很好。示例：

<div class="module accordion expand"></div>

/* All these match that */
.module { }
.accordion { }
.expand { }

【讨论】：