Question

HTML

<div data-foo> ... </div>

CSS

div[data-foo]{ ... }

这是个好主意吗？有什么缺点吗？

我认为数据方法在我有数百个“foo”元素时是有意义的，因为HTML标记大小减少（每个元素为-3个字符）。

Answer 1

div[data-foo]（IE6，请参见此处：http://www.quirksmode.org/css/selectors/）
div[data-foo]使语义更少
class="foo"和data-foo会占用相同的空间。如果您还没有将服务器设置为放气，则应该。
class=foo只有一个字符长于data-foo甚至未压缩，并且是完全有效的HTML。

Answer 2

这完全取决于你，例如元素必须具有不同的属性，所以你需要定义样式甚至重复一些，而不是我将使用一个我可以用于两者的类，而不是使用属性选择器将我声明的属性限制为具有该属性的元素，您可以在其中自由使用类，而不管元素属性组合

.class { /* You can use this anywhere you need these properties */
   font-family: Arial;
   font-size: 13px;
}

这将限制为ELEMENT-ATTRIBUTE组合

div[data-menu] { /* This will LIMIT you to a combination of div 
                    element having an attribute called data-menu */
    font-family: Arial;
    font-size: 13px;
}

重要：特异性会让你变得一团糟

在CSS中使用数据属性而不是类

2 个答案: