css - 样式信息的数据属性与多个类的使用

Question

我一直在创建一个交互式网页。主要部分是一个 SVG map 。这张 map 有大约 600 个文本标签，这些文本标签目前有几个类别。当前示例如下

<text class="UCWF left base" x="1513.8158" y="733.91864"><tspan x="1513.8158" y="733.91864">Canary Wharf</tspan></text>

类属性中的“UCWF”是唯一的站点代码。 (对于车站来说是独一无二的，但还有一个代表车站本身的矩形，所以我无法将此信息移动到 id 标签。)第二个条目将车站的样式设置在文本的左侧。最后一部分表示它是站名的上半部分还是下半部分。 (有些有两个，以便它们出现在背景上)这已经像是一个繁琐的解决方案，而且还会变得更糟。我想为每个车站添加信息，告诉他们该车站是否有水平轮椅 channel ，以及您是否可以在那里骑自行车。对我来说，显而易见的解决方案是将其添加为数据属性

data-cycle="true" data-wheelchair="false"

不过，我只会使用此信息来影响文本样式。选择一个标记为轮椅的按钮会将所有没有轮椅 channel 的站点设置为灰色，而其他站点则设置为黑色，因此这自然属于类和样式问题。所以关键问题是这个功能属于样式还是数据？将来是否有可能从选择上受到限制。我相信两者都会起作用。作为背景，我是网络编码的新手，但有兴趣尽可能遵循最佳实践

Answer 1

来自specification

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

因此，如果您仅将这些信息用于样式目的，最好使用 class 属性(如果您不想使用单独的 CSS，则最好使用 style ).

我想到的唯一可能的限制是，将来看到那段代码时，您可能会认为 data-* 属性具有某种与样式无关的特殊功能。