For example, if I have a button in the markup:
Rather than writing a typical jQuery selector $(’.ic-button’), our practice is to select based off the data attribute as so $(’[data-ic-class=“button”]). You can view the code at CodePen.
One might jump to the conclusion that this approach is only supported on HTML5 browsers since it utilizes the data-* attributes introduced in HTML5. Fortunately this is not the case. In older browsers, the data-* attributes are treated as custom attributes and supported. There is one downside that hopefully isn’t a problem for you. If you have to support IE6 (see The Internet Explorer 6 Countdown immediately!), then you may run into performance issues due to reference the data-* attributes as opposed to class names.