Kevin Powell - Community•9mo ago

Data Attribute

Hey, i see people using data attributes (or classes, but I've heard data attributes are better for this sort of thing) for things such as different permutations of designs. For example, if i had a card with x at the top and y at the bottom but lets say for the second card i wanted to swap them so y is on the top and x is on the bottom, what would be the difference between swapping them in the html like so:

<article>
  x
  y
</article>
<article>
  y
  x
</article>

<article>
  x
  y
</article>
<article>
  y
  x
</article>

or adding a data attribute like this (i see people do this over the html one but to me it seems like the data state requires more to achieve the same effect? is it that it's more semantic to do it this way?):

<article>
  x
  y
</article>
<article data-state="reversed">
  x
  y
</article>

<article>
  x
  y
</article>
<article data-state="reversed">
  x
  y
</article>

article[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

article[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

Thanks in advance.

8 Replies

Joao•9mo ago

You would do this when you need some interactivity derived from user interaction or some other parameter that is only available once the browser has loaded the page or through JavaScript. This can be handy to preserve the HTML structure intact, useful for screen readers, web crawlers and simplify the code if you are using a template engine of some kind during development (since you don't have to write what's essentially the same code twice). A popular use case are tooltips, as you can use data attributes to display content using content: attr(data-state). Also, and this is personal preference, I don't like targeting elements in my JavaScript code using classes. I use classes almost exclusively for CSS styling and nothing else. For that interactivity that I mentioned, I use data attributes. That way, whenever I see an element that has a data attribute I immediately know that I should look for it in my JS code, in addition to the CSS where I'll apply some styles for the different states.

snxxwyyOP•9mo ago

ah thank you, so i have a few questions: 1) you'd only use a data attribute if the change occurs via a user interaction or through js? 2) what would be an example of another parameter only available once the browser has loaded the page? 3) why are data attributes useful for screen readers? 4) when creating a tooltip and putting the content as content: attr(data-state), what value does the attr(data-state) equate to and where does it get it from? Since tool tips are using content i presume they are commonly psuedo-elements?

Joao•9mo ago

1. Yes, as I can already use other types of interaction using regular CSS ie: hover, active, focus, etc 2. Media queries for things like viewport widths, prefers-color-scheme or reduced motion. 3. They are not. But, by using them you can avoid modifying the HTML structure. 4. You can just assign data-state="hello" to the HTML element, allowing you to show that content on a pseudo-element for example, that only shows after 2 seconds of hover.

snxxwyyOP•9mo ago

ah awesome, thank you for your help with those. One last thing, referring back to the example in my original question. For you and the people with the same preference, would you use a class="reverse" over data-state="reversed" to style the different permutation since it doesn't change via interactions?

Joao•9mo ago

I guess it depends... with so little context I would have to answer that I would use neither of those options. If the content is supposed to be like that (one card X, Y and below that Y, X) then there's no need to do anything, just change the HTML.

snxxwyyOP•9mo ago

oh gotcha, in what cases would you do something like that?

Joao•9mo ago

But if it can change, then you should consider how and when it's going to change and what other needs do you have for this effect. But in that case I would leave the HTML as XY, XY (repeat two elements) and change as needed using CSS or JS Do you have a concrete example?

snxxwyyOP•9mo ago

i don't unfortunately but i understand what you mean now, thank you.

Gaming

Programming

Data Attribute