为什么我会在HTML和CSS中使用类而不是属性？

Question

我正在创建一个Web应用程序,需要决定一种一致的方式来设计我的元素.我注意到很多帮助在线使用类但我通常使用属性(如查询选择器[my-attr])来设置多个元素的样式,因为我不必使用classList并且可以非常容易地删除和设置属性.

不使用外部库,为什么人们会使用类来设置元素的属性？似乎属性可以做所有类可以做但更好的事情,因为您也可以为属性赋值.我还没有看到任何关于性能差异的讨论,让我相信属性应该比在样式页面的教程中更受欢迎.

任何关于类可以比某些属性做得更好的实例的想法都会受到高度赞赏,即使这些论点是主观的并归结为某种偏好!

谢谢!

同样,这适用于vanilla 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就是一个全局属性.

这是一个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开发程序/教程的第1天学习.所以你要通过删除它的一个基本部分来为项目投入一点力气.

我相信你已经听过这句话"只因为你可以,并不代表你应该这样做." - 我认为这完全适用于此.我的意思是,我们实际上习惯使用类似的东西<font color="red">Red</font>而且我们已经远离它,因为在单个全局属性中对样式进行分组更有意义.没有什么可以阻止你,但我认为它要求更多的麻烦而不是丢弃任意参数名称的类,更不用说你是否有问题并发布你的代码以获得帮助,第一个响应将永远是"你为什么这样做你在使用什么预处理器？"