Javascript 数据属性的jQuery移动“样式表”

jQuery手机演示页面中有很多示例。但是在看到这些之后，在我看来，我们已经从HTML4到jQueryMobile形成了一个巨大的循环。让我们看一些样品

<button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
...

我知道数据属性映射到类。例如，数据iconpos=right to class=ui btn icon right

---

因此，可以创建一些LESS或SASS脚本。然而，这是一种黑客行为：/。那么，如何做到这一点是重用jQuery mobile数据属性集的最佳方法？

您希望实现什么？我想重用多个数据属性集。在上面的示例中，有3个属性被重复了一遍又一遍..myComponent{iconpos:right；mini:true；inline:true；}不是有效的CSS btw。我知道这一点。这就是为什么我要寻找一些可以让我重用数据属性集的东西。我称之为jQuery移动规则，并指出我将使用CSS约定来显示我想要得到什么。我以为会很清楚。对不起，误会了。

<td align="right" bgcolor="green" colspan="5" rowspan="10" height="600" (...)>

<button type="button" data-icon="gear" data-custom="myComponent" id="add">Add</button>
<button type="button" data-icon="plus" data-custom="myComponent" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-custom="myComponent" id="collapse">Collapse last</button>
...

.myComponent {
    iconpos: right;
    mini: true;
    inline: true;
}