So I think the consensus here seems to be that the repetitive data-fapi- prefix adds a lot of extra mark-up for little in return besides for avoiding conflicts imposed by other third part extensions.
So the approach should changed from this:
to something like this:HTML Code:
<div data-fapi-textfield data-fapi-name="first_name" data-fapi-widget="text" data-fapi-element>
<div class="element textfield name-first_name widget-email">
The only problem I have with this is that any third party CSS that uses selectors .element, .textfield, etc without a more specific context would be applied. This would not be good. Which is why the initial data-api- prefix was applied. I will admit though the multiple class method is a lot less mark-up.
I guess the solution to preventing similar selector conflicts would be to add the prefix back in like this:
Still less mark-up than data attributes, more than without prefixing but just about eliminates the possibility of CSS selector conflicts brought about by third party extensions when used. This is the method jquery ui seems to use to prevent the same problem. Though the prefix for it is slightly less characters ui-.HTML Code:
<div class="fapi-element fapi-textfield fapi-name-first_name fapi-widget-email">