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

at the top and

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

is on the top and

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.

KP-C

Kevin Powell - Community•2y ago•

12 replies

snxxwyy

Data Attribute

at the top and

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

is on the top and

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 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.

Data Attribute

Similar Threads

Data Attribute

Similar Threads

Similar Threads

Similar Threads