我读过根据HTML5 data- *属性设置内容样式是不好的做法。
引自html5doctor.com：
不应使用特定数据属性的存在/不存在 作为任何样式的CSS钩子。这样做会建议数据 你存储对用户来说是至关重要的，应该是 以更加语义和可访问的方式标记。
有人能否对此声明有所了解，或举一些例子说明为什么会对用户的体验产生负面影响？
作为一个非常基本的示例，假设我在元素上使用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和自定义属性来做很多很酷的事情来根据内容设置内容，使我们的“真实”类更加通用，以处理不基于内容的纯样式。
这只是一个在某些情况下可以忽略的一般准则，还是一个可怕的客户端罪？
谢谢！
答案 0 :(得分：0)
基本上他们建议的是，如果错误消息，状态或数字足够重要，可以呈现给用户，那么它应该以可访问的方式呈现。 WCAG Guideline 1.4.1说：
使用颜色：颜色不是唯一可视的传达方式 信息，表示行动，提示回复，或 区分视觉元素。 （A级）
另外需要注意的是，CSS创建的内容不适用于屏幕阅读器和其他辅助技术。