为什么我会在HTML和CSS中的属性上使用类？

Question

我正在创建一个Web应用程序，需要确定一种一致的方式来设置我的元素的样式。 我注意到有很多在线帮助使用类，但是我通常使用属性（例如查询选择器[my-attr]）来设置多个元素的样式，因为我不必使用classList，并且可以非常轻松地删除和设置属性。

不使用外部库，人们为什么要使用类来根据属性设置元素样式？ 似乎属性可以完成类可以做的所有事情，但是效果更好，因为您还可以为属性分配值。 我也从未见过任何关于性能差异的讨论，这使我相信属性应该比样式页面上的教程更受赞赏。

即使参数是主观的并且归结为某种偏好，对类在某些方面比属性可以做得更好的实例的任何想法也将受到赞赏。

谢谢！

同样，这适用于原始javascript，HTML和CSS。 我知道jQuery之类的库可能会使使用类变得更加容易，但是我不打算使用任何库。

Answer 1

说实话，这是更一致的，毕竟是一切。 如果您想使用属性，那就去做吧。 但是，这给以后需要帮助的人增加了很多困难。 CSS类设计用于通用样式的分组选择和应用。 CSS 恰好也能够选择属性，因为在某些情况下它确实有意义。

通常，应该为任何非样式相关的属性保留属性，这些属性会为其他用途添加值，无论是屏幕阅读器还是JavaScript的变量容器，例如data-id="34"可以让您使用ID参数。

考虑这个例子，它有一些简单的基于“类”的按钮：

 .button { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } .primary { background: currentColor; } .primary span { color: #fff; } .blue { color: #0095ee; } .red { color: #ee3300 } 

 <a href="#" class="button red">Red Button</a> <a href="#" class="button red primary"><span>Red Button</span></a> <br /> <a href="#" class="button blue">Blue Button</a> <a href="#" class="button blue primary"><span>Blue Button</span></a> 

为了使用属性复制类似的内容，我们将使用一些令人讨厌且相当随意的属性名称来进行类似的操作。 这样做实际上使我搞砸了，因为在一种情况下，我使用了错误的属性名称和值对。

 [type="button"] { display: inline-block; border: 1px solid; padding: 4px 10px; text-decoration: none; margin-bottom: 4px; } [status="primary"] { background: currentColor; } [status="primary"] span { color: #fff; } [color="blue"] { color: #0095ee; } [color="red"] { color: #ee3300 } 

 <a href="#" type="button" color="red">Red Button</a> <a href="#" type="button" color="red" status="primary"><span>Red Button</span></a> <br /> <a href="#" type="button" color="blue">Blue Button</a> <a href="#" type="button" color="blue" status="primary"><span>Blue Button</span></a> 

将所有样式和组目标属性保留在class属性中是否没有更多的语义意义？ 我的意思是，这就是它的设计目的。 我想您可以删除参数值并仅使用参数名称，但是考虑到class本身就是Global Attribute ，您确实在破坏属性的目的。

这也是一个JavaScript示例：

 let classes = document.getElementsByClassName('button'); for( i = 0, n = classes.length; i < n; ++i ){ classes[i].style.background = 'red'; } let attrs = document.querySelectorAll('[button]'); for( i = 0, n = attrs.length; i < n; ++i ){ attrs[i].style.background = 'blue'; } 

 a { padding: 10px; margin-bottom: 4px; display: inline-block; text-decoration: none; color: #fff; } 

 <a href="#" button>Attr 1</a> <a href="#" button>Attr 2</a> <a href="#" button>Attr 3</a> <br /> <a href="#" class="button">Class 1</a> <a href="#" class="button">Class 2</a> <a href="#" class="button">Class 3</a> 

撇开JS与基于类（和id）的选择器功能进行大量集成这一事实相比，您必须对属性按钮使用querySelector和querySelectorAll 。

虽然天生不是一件坏事，（老实说，我更喜欢使用querySelector不是getElement(s)By… ），但是当您查看它时， querySelectorAll('[button]')读起来并不好，几乎就像我在瞄准<button>元素。 从语义上讲，它比以下内容更难阅读：

getElementsByClassName('button') -清楚地获取所有具有按钮类的元素，甚至

querySelectorAll('.button') -自. 通常被理解为“类”选择器，并且使用HTML，CSS和JS的每个人都在任何Web开发程序/教程的第一天就学到了这一点。 因此，您需要删除项目中的一些基本内容，从而在项目中花了些力气。

我确定您已经听过“仅仅因为您可以，并不意味着您应该”这句话。 -我认为这在这里非常适用。 我的意思是，我们实际上曾经使用过<font color="red">Red</font> ，因此我们放弃了它，因为在单个全局属性中将样式分组更有意义。 没有什么可以阻止您的，但是我认为这比为任意参数名称删除类要值得的麻烦更多，更不用说您是否遇到问题并发布代码以寻求帮助，第一个响应始终是“您为什么这样做那，您使用什么预处理器？”

Answer 2

我认为这只是功能上的问题，如果您想给样式使用应该使用的类，但是如果您要修改u可以使用查询选择器，因为它不会在html上添加内联样式，并且可以缩小脚本。