KPC
Kevin Powell - Community•14mo ago
Brian_Lab

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
Joao•14mo 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);
}

Did you find this page helpful?