Search code examples
javascriptjquery-mobile

Why does jQuery Mobile use data-role attributes instead of classes?

This may be a naive question, but I'm learning jQuery Mobile and unsure why everything is related to a data-role attribute. It seems that even times when the role is related to the style, they are using data-role over class

I understand that for semantics, data-role makes sense in a lot of cases but it just seems to be abused here. Wouldn't that kind of lookup also be slower?

Why do they use data-role over class?

Thanks for any insight.

Solution

  • Why data

    They could simply use role as an attribute (like other frameworks do), but this would make the resulting HTML invalid. Therefore a data- is added to every attribute name.

    Why not classes

    I think the main reason for that is to separate view from logic as far as it is possible. In larger projects, CSS and JavaScript are not written by the same person.