是否更好的做法是根据数据属性或类的状态为元素设置样式？

Question

我想知道这里最好的做法是根据状态设计元素。

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

在元素加载之前对元素应用一类'loading'是否更好，然后用JS删除这个类。使用'loading'类来渲染微调器。

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

干杯。

Answer 1

通常，课程是视觉变化的首选。

根据W3C ......

data

  

自定义数据属性旨在存储私有的自定义数据   页面或应用程序，没有更合​​适的   属性或元素。这些属性不适合使用   与使用属性的站点无关的软件。

class

  

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

Answer 2

当某个区域（HTML元素）可以有不同的视图，但所有不同的视图使用相同的数据时，我相信它更具语义和正确性＃34;使用数据属性。

我通常使用data-view，但如果它是加载状态，那么我会使用一个类，并为所有事情创建一些通用的解决方案 如果可能，loading类看起来一样。

一个简单的例子，如果你有div显示某些图形/图表可视化表示的数据，用户可以将该区域的视图切换为＆ ＃34; 表＆＃34;视图，这个div看起来像这样：

默认状态

<div class='myComponent' data-view='chart'>...</div>

加载状态

<div class='myComponent loading'>...</div>

替代视图状态

<div class='myComponent' data-view='table'>...</div>

我广泛使用这种编码风格，它可以嵌套。例如，我通常在SPA页面上工作，其页面内容根据URL而变化，因此main HTML元素可能如下所示：

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

CSS：

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