In one of your latest posts you included an HTML snippet, in which I could see you use a lot of data-role attributes to give semantic to the markup.
Given that we use a lot of OOCSS concepts in my company, it would be great if you could elaborate on how and why you use them.
Thanks.
EDIT: @kylefiedler or @kaishin
@zamith I personally don’t use them for styling. I know our developers will use them for testing sometimes. @ldamon and @derekprior might have better insight since it was their project.
Yes, I’ve noticed they are both used in CSS and JS.
Thanks anyway.
This describes the thinking here: Decoupling Data from Presentation
The idea is that developers could use the data attributes to specify behavioral things (integration with JS), while designers would be free to change the tags and classes as they see fit for design. Some people really like this approach, but in practice I didn’t like it much.
The data-attribute selectors are clunkier and longer and we ended up using the data attributes for styling as well as we often want to ensure we are talking about exactly the same element in design and development. I’d prefer to stick to classes, perhaps prefixing with js- if we need to differentiate between behavior and style.