Javascript 使用数据属性或类根据元素的状态设置元素样式是否更好？

我想知道根据元素的状态设计元素样式的最佳实践是什么

我有一些内容，可能需要一段时间来加载，而它的加载我想显示一个加载微调器

最好对元素应用一个“加载”类，直到它被加载，然后用JS删除这个类。使用“loading”类渲染微调器

或者，将加载状态与类解除关联并使用数据属性（即[data status=“loading”]）是更好的做法。然后将样式应用于数据属性而不是类

---

干杯。

一般来说，课堂是视觉变化的好去处

根据W3C

自定义数据属性用于将自定义数据存储到私有数据 没有更合适的页面或应用程序 属性或元素。这些属性不供用户使用 独立于使用属性的站点的软件

class属性在HTML中有几个角色：作为样式表 选择器（当作者希望将样式信息指定给集合时） 元素）。用于用户代理的通用处理

---

一般来说，课堂是视觉变化的主要场所

根据W3C

自定义数据属性用于将自定义数据存储到私有数据 没有更合适的页面或应用程序 属性或元素。这些属性不供用户使用 独立于使用属性的站点的软件

class属性在HTML中有几个角色：作为样式表 选择器（当作者希望将样式信息指定给集合时） 元素）。用于用户代理的通用处理

当某个区域（HTML元素）可以有不同的视图，但所有不同的视图使用相同的数据时，我认为使用数据属性在语义上更“正确”

我通常使用

数据视图

，但是如果它是一个加载状态，那么我会使用一个类，并用它为所有事情创建一些通用的解决方案

加载

类以使其看起来相同（如果可能）

举个简单的例子，如果您有一个

div

，其中显示了一些由图形/图表直观表示的数据，并且用户可以将该区域的视图切换为“表”视图，那么该div将如下所示：

默认状态 和CSS：

#page[data-view="home"]{
...
}

当某个区域（HTML元素）可以有不同的视图，但所有不同的视图使用相同的数据时，我认为使用数据属性在语义上更“正确”

我通常使用

数据视图

，但是如果它是一个加载状态，那么我会使用一个类，并用它为所有事情创建一些通用的解决方案

加载

类以使其看起来相同（如果可能）

举个简单的例子，如果您有一个

div

，其中显示了一些由图形/图表直观表示的数据，并且用户可以将该区域的视图切换为“表”视图，那么该div将如下所示：

默认状态 和CSS：

#page[data-view="home"]{
...
}

---

对于数据集，您不会污染“类范围”。对于数据集，您不会污染“类范围”。是的，我关心的是类的加载状态是，我只使用伪元素添加加载微调器，我认为，我并没有直接影响元素本身的样式。@THughes-states语义应该由

类
定义。就像您有一些菜单或选项卡一样，所选项目应该有一个表示其状态的类
active
，
load
是一种状态。这绝对应该是一门课。我已经为几十个网站编写了超过12年的代码，因此客户端是我大脑的连接方式：）是的，我对加载状态作为一个类的关注是，我只使用伪元素添加加载微调器，从我的角度看，我并没有直接影响元素本身的样式。@THughes-states语义应该由
类
定义。就像您有一些菜单或选项卡一样，所选项目应该有一个表示其状态的类
active
，
load
是一种状态。这绝对应该是一门课。我已经为几十个网站编写代码超过12年了，所以客户端就是我大脑的连接方式：）
<div class='myComponent' data-view='table'>...</div>

<main id="page" data-view="home">

#page[data-view="home"]{
...
}