Skip to content

Double Data

I keep seeing people write CSS and jQuery selectors to act on elements with [data-*] attributes where the initial selector is a class. More often than not the class adds more bloat to the code and ends up becoming a secondary point of failure.

Why bother writing $('.foo').data('bar'); when the data should really be accessed using $('[data-bar]').data('bar')?

This changes the HTML markup from:

<div class="foo" data-bar="lorem ipsum dolor sit amet">...</div>

to:

<div data-bar="lorem ipsum dolor sit amet">...</div>

How nice is that? No class! One less thing to forget.