Why This Doesn't Fly
There's really no practical reason why this couldn't work of course, in fact we actually implemented it a couple of times like this and everything went pretty smooth. Take a list of articles, add data-pattern="carousel" and bang: there's your article carousel. Remove the data- attribute and it simply reverts to an ordinary article list. But there are some pretty bad drawbacks that have to be taken into account when you're opting to take this path.
The main problem is that we're attempting to tie and embed functionality directly into our html code by setting the data-pattern attribute. Remember all that fuzz about using presentational class names and how that conflicted with our html ideals? Well, this is exactly like that, only we're using functionality-driven data- attributes to do it this time around. You may not care about separating style and functionality from structure, but even then things could get messy real quick.
Throw Adaptive Design into the Mix
When you're opting to implement an adaptive design, the real problem with using data- attributes for functionality kickstarting starts to materialize. What acts like a flyout on a mobile version of your site isn't necessarily a flyout on the desktop version of your site. What acts and is displayed as a carousel on mobile could just be a regular list on desktop. It's the perfect illustration that functionality isn't bound to a certain component, but could differ depending on the context and the instance of a component, which is why it doesn't belong into the html code.
HTML Changes are Costly
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)