我了解到，根据 HTML5 data-* 属性设置内容样式是一种不好的做法。
引自 html5doctor.com:
The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner.
有人可以进一步阐明此声明或举例说明为什么这会对用户体验产生负面影响吗？
作为一个非常基本的示例，假设我在元素上使用 data-attribute-error="404" 来向脚本提供反馈，而不必同时添加 error- 404、error-500 等每个元素上的一些补充样式类，我不能像这样设置它们吗:
.error { color: red; }
.error[data-attribute-error]:after { content: attr(data-attribute-error); }
.error[data-attribute-error=404] { color: grey; }
.error[data-attribute-error=404]:after { color: red; }
/* etc */
这可能不是最好的例子，我不担心浏览器支持。我只是想更好地理解整体概念。
似乎我们可以使用 CSS3 和自定义属性做很多很酷的事情来根据内容设置样式，让我们的“真实”类更通用以处理不基于内容的纯样式。
这只是在某些情况下可以忽略的一般准则，还是可怕的客户端错误？
谢谢!
最佳答案
基本上，他们的建议是，如果错误消息、状态或数字足够重要，可以向用户展示，那么应该以易于访问的方式展示。 WCAG Guideline 1.4.1说:
Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
另一件需要注意的事情是，屏幕阅读器和其他辅助技术无法使用 CSS 创建的内容。
关于html - 基于 HTML5 数据属性的样式化内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9729470/