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

Question

创建这样的CSS类是否有任何问题：

[test] { font: 13px; }

并在HTML属性中使用它：

<div test></div>

使用此方法会影响某些浏览器的性能吗？我已经使用Mozilla Firefox和Google Chrome进行了测试，它们似乎没有问题。

Answer 1

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

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

Answer 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/

Answer 3

最好使用课程。这种方式在旧版浏览器中不起作用，并且不专业。 但是它没有任何性能问题。

Answer 4

HTML:
<div class="test">

CSS:
.test { font:13px; }

很好用的课程。例如：

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

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