I feel like we discussed this a year or two ago, but I couldn't find it. And whatever was said is probably outdated now, anyway. I haven't been able to code in about 6 months and I'm finally getting back in to the groove...
Assuming that I'm
strictly using the class name for styling, is there any particular reason to NOT use a data-attribute in place of a class name?
Example:
<style>
.flex { display: flex }
</style>
<div class="flex">
blah blah blah
</div>
Or:
<style>
[data-flex] { display: flex }
</style>
<div data-flex>
blah blah blah
</div>
The data-attribute seems to be well supported:
[
caniuse.com...]
The only real advantage would be saving a few bytes of bandwidth, but bytes DO add up. I obviously wouldn't use it in cases where there would have been multiple classes or it would take more space, but for containers that would only ever have the one class it's marginally smaller.
If there's no disadvantage then, while I'm rebuilding, is there any reason to not use it in place of a class?