12 replies

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

x at the top and

y

y at the bottom but lets say for the second card i wanted to swap them so

y

y is on the top and

x

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>

<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>
  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;
}

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

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

Thanks in advance.

Data Attribute

Similar Threads

Similar Threads

Similar Threads