Kevin Powell - Community•12mo ago

classes vs data-type…

Kevin’s CSS often includes declarations, such as “.container[data-type=“wide”]”. But I’m struggling to understand how this approach differs from using two classes. Thanks!

1 Reply

Joao•12mo ago

Using data attributes is a more expressive way to qualify html elements in some way. You can still target them with CSS and JavaScript so there's no need to use them, but for single-purpose attributes it may make more sense to use them. For example to describe something is opened or closed. You can do the same with CSS but you can use a single property and target it differently in CSS:

.accordion {}
.accordion--open {}

.accordion {}
.accordion--open {}

But you can also do:

.accordion {}
.accordion[data-open] {}

.accordion {}
.accordion[data-open] {}

It's just a little more descriptive and can be used for displaying text for things like tooltips for example:

<div class="tooltip" data-tooltip="Hover me to show some description">
  <button>Some Action</button>
</div>

<div class="tooltip" data-tooltip="Hover me to show some description">
  <button>Some Action</button>
</div>

.tooltip::before {
  content: data(data-tooltip);
}

.tooltip::before {
  content: data(data-tooltip);
}

Gaming

Programming

classes vs data-type…