例如:
div.something { font-size: 1em; }
比...更好
.something { font-size: 1em; }
除了将其缩小到只有div,还有其他原因吗?
(我问这个问题的原因是最近我偶然发现了一个包含'div'的知名网站,但大多数网站都不会费心)
更新:
感谢所有答案。结论是速度是一个因素,但不值得注意,因此可以忽略。在最佳实践方面的共识是包括标签更干净 - 一般规则应该尽可能保持所需样式的CSS“紧凑”。
div.something { font-size: 1em; }
.something { font-size: 1em; }
除了将其缩小到只有div,还有其他原因吗?
(我问这个问题的原因是最近我偶然发现了一个包含'div'的知名网站,但大多数网站都不会费心)
更新:
感谢所有答案。结论是速度是一个因素,但不值得注意,因此可以忽略。在最佳实践方面的共识是包括标签更干净 - 一般规则应该尽可能保持所需样式的CSS“紧凑”。
如果你想在不仅仅是div上使用一个类,你可以使用一个通用的类,比如:
.something{}
但是,无论顺序如何,越具体的类别越突出,即:
#someID div.something { background: green; }
div.something { background: blue;}
.something { background: red; }
由于第一个是最具体的:
<div class="something"> this will be blue </div>
<div id="someID">
<div class="something">
this will be green
</div>
</div>
<p class="something">this will be red</div>
在规则中添加元素选择器(div),可以增加规则的特殊性,使其比通用类选择器(.something)更加重要。
这也使得您的CSS更易读。如果您的所有类选择器都没有与元素前置,那么这意味着您的类是模糊不清的,并且可以应用于任何元素(这可能是有意为之,但更常见的情况是不这样做)。
正如上面所述,使用元素名称会带来速度方面的权衡,但几乎不会被注意到。
我认为唯一的目的就像你说的“将它缩小到只有 div ”。所以,<p class="something">
与 div 行为应该相同或不同...
我认为这个问题与通常众所周知的编程概念——作用域限制非常相似:你将变量和其他资源的作用域限制在最小范围内。
同样地,如果你知道某个样式只会用于具有特定类的 div 元素,那么将“类的作用域”限制在 div 元素上是有意义的。这样可以减少混乱,使你的样式表更易于维护。
类应该结构良好、功能性强且原子化。如果您认为会遇到像 element.name 这样的情况,有时将其缩小范围是很好的选择。
div.highlight {
background: #FF00FF;
}
span.highlight, p.highlight {
color: #FF00FF;
}
.highlight {
color: #FF00FF;
}
div.highlight {
background; #FF00FF;
color: inherit;
}
我认为,作为一个通则,一个类的定义应该适用于应用到它上面的所有元素。如果有一个特定的情况需要覆盖类的默认定义,那么你至少应该定义一个新的类,这样你就不会破坏其他元素的演示。
你还需要想办法避免在选择器中出现这样的结构性依赖:
div#main div.section h1.title span.link { }
但最好还是直接写
div#main span.link {}
如果你想让其他具有相同类名的标签具有不同的外观,那么这可能是一个好主意。
我总是包含标签名称以获得更好的可读性,并确保不会覆盖共享类名的其他规则。
在选择器的开头添加div会创建一个额外的依赖关系,这个css规则和html文档之间。突然更改元素类型也需要更改css,没有充分的理由。
对于需要指定元素类型以区分两个规则的情况,我建议改变类名。不要期望那个div永远是div。它可能更适合作为p或fieldset或label。
避免不必要的依赖关系。
低特异性的css规则是一个问题,但添加元素类型并不是解决方案。如果我的.price被更改为div.price,意外匹配的概率只降低了一点点。你最好使用外部#id来命名空间化它。