我发现使用 css 属性选择器来设置网页样式非常有用，因为对我来说，它似乎比我使用class=""or时更快（编写/阅读代码） id=""。
使用属性选择器来设置网页样式是一种好习惯吗？而且，这是否适用于旧版浏览器？
HTML：
<div data-header></div>
CSS：
div[data-header] {
/* style here */
}
问问题
104 次
1 回答
0
使用属性的一个问题是，它们总是与一种 html 元素相关联。所以在上面的例子中，data-header只能应用于 div 。如果你想将相同的样式应用于<p>标签，例如。你将不得不再次编写样式：
p[data-header]
并且由于您谈论的唯一优势是它需要更少的打字..那么这是一个微不足道的优势（即我们不是在谈论更少的处理或渲染时间或增加的可维护性等）
我建议您考虑面向对象 CSS (OOCCSS) 的原则：它具有以下关键原则：
一个物体无论放在哪里都应该是一样的。因此，不要使用 .myObject h2 {...} 设置特定 h2 的样式，而是创建并应用一个描述相关 h2 的类，例如 h2 class="category"。
这使您的 css 更可重用.. css 管理不善的一个常见问题是您很容易得到数千行 css.. 其中大部分是多余的。
有关 OOCCSS 如何使 css 更可重用的具体示例。请参阅此答案
重要更新：我上面所说的拥有比属性更可重用的类是不正确的（见下面的讨论）..所以请忽略它。
既然这么说..我仍然会避免只使用属性来设置我的html的样式..如果您使用css属性的唯一原因与它的设计用途不同
（一般来说，对你的代码太聪明并不是一个好主意。虽然它可以节省你的时间等等。它可能会使以后使用你的代码的人感到困惑。总是以来自世界各地的其他人的态度编码世界可能会掌握您的代码..因此可读性胜过更少的代码等..尤其是当绝对没有其他优势（例如处理时间等）时。
例如（我什至没有做任何研究就这么说..我只是依靠我使用 css 的 10 多年经验）..如果我在你的代码中看到这个
<div data-header>
我不知道这个数据头是唯一的选择器还是可以出现在其他地方..但是如果我看到这个：
<div class="data-header">
然后我可以立即得出结论（无需查看代码中的其他任何地方）这不是一个独特的选择器..而且我很可能会看到同一页面中的其他元素，甚至是应用了相同类的其他页面..（即与使用<div id="data-header">.. 不同，后者是唯一的）
假设我是 javascript/jQuery 的人，而你只是设计师..这是你提供的一条不言而喻的信息，只是因为你使用 CSS 的设计方式。但是，如果开始变得聪明并以自己的方式使用 CSS 属性..那么这就是麻烦的秘诀（请参阅我的问题在这里和我在它下面发表的评论.. 获得对每个人都意味着 x 的东西并制作这意味着你只为你）。
于 2013-03-03T12:53:20.327 回答