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

Question

I'm wondering what the best practice here is for styling an element based on its state.

I have some content that can take a while to load, whilst it's loading I want to show a loading spinner.

Is it better to apply a class of 'loading' to the element until it's loaded, then remove this class with JS. Using the 'loading' class to render the spinner.

Or is it better practice to disassociate the loading state from a class and use a data attribute, ie [data-status = "loading"]. Then applying my styles to the data attribute rather than the class.

Cheers.

Answer 1

Generally, class is the go-to for visual changes.

According to W3C...

data

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.

class

The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). For general purpose processing by user agents.

Answer 2

When a certain area (HTML element) can have different views, but all the different views use the same data, then I believe it is more semantically "correct" to use a data attribute.

I normally use data-view , but if it's a loading state, then I would use a class, and create some generalized solution for all things with that loading class to look the same, if possible.

A simple example, if you have a div which shows some data which is visually represented by some graph/chart and the user can switch the view of that area to become a " table " view, than that div would look like this:

default state

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

loading state

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

alternative-view state

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

---

I use this style of coding extensively, and it can get nested. for example, I usually work on SPA pages, where the content of the page changes depending on the URL, so the main HTML element might look like:

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

And the CSS:

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