布局使用数据属性是否可以接受？

Question

最近，我一直在使用数据属性进行布局。例如：

<section data-ui-panels="vertical open" data-ui-accordion="stacked" class="primary new-products">
<ul data-area="nav" class="ui-list">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>

<div data-area="body" class="journals">

<div class="unit">
<p>This is my text</p>
</div>

</div>

</section>

优势

• 代码更具可读性：我可以更轻松地发现HTML和CSS中的布局元素。布局的选项不必冗长（例如堆叠而不是ui-手风琴堆叠）。
• 更轻松的样式：布局类可能会被其他类覆盖。属性始终优先于类，因此不要被覆盖。其中许多布局属性与Jquery一起使用，因此Jquery不会被其他任何东西覆盖。
• 更容易重复使用：我可以在项目之间重复使用代码，而不必担心特定于网站的代码会覆盖布局。
• 适用于旧浏览器，例如IE8。

这样做有什么缺点吗？

我发现t his article表明可能存在性能问题，但是在它提供的值中，数据属性执行得更快，所以我不太了解它。