【问题标题】:What's better in CSS: div.something or just .somethingCSS 中什么更好: div.something 或只是 .something
【发布时间】:2010-10-08 01:27:17
【问题描述】:

在 CSS 中,当在 div 上设置样式时(例如),包含 'div' 有什么好处,除了可以提高匹配精度。浏览器渲染速度可能更快吗?

即是:

div.something { font-size: 1em; }

优于

.something { font-size: 1em; }

除了将其缩小到仅 div 之外还有什么其他原因吗?

(我问的原因是我最近偶然发现了一个包含 'div's 但大多数人不会打扰的著名网站)

更新:

感谢所有答案。结论是速度是一个因素,但并不明显,因此值得忽略。最佳实践的共识是包含标签更简洁 - 一般规则应该是保持 CSS 尽可能“紧”以获得所需的样式。

【问题讨论】:

    标签: css css-selectors


    【解决方案1】:

    如果你想让其他具有相同类名的标签出现另一种外观,那么这样做可能是个好主意。

    为了更好的可读性,我总是包含标签名称,并且我确信如果它们共享一个类名,我不会覆盖其他规则。

    【讨论】:

      【解决方案2】:

      嗯,我认为唯一的目的就像你说的“将其缩小到只有 div”。这样<p class="something"> 的行为应该与 div 相同或不同...

      【讨论】:

        【解决方案3】:

        我认为这个问题与广为人知的范围限制编程概念非常相似:您将变量和其他资源的范围限制在最低限度。

        同样,如果您知道某个样式将仅用于该类的 div,则将“类的范围”限制为 div 是有意义的。它减少了混乱并使您的样式表更易于维护。

        【讨论】:

        • 感谢所有回答的人。所以大家一致认为这纯粹是一个范围问题。
        • 将依赖项添加到 html-element 的类型并不能很好地与范围限制进行比较。您创建了一个不必要的依赖项,使您的 html 和样式表更易于维护。 html 的更改突然需要 css 的更改。这不是好的设计。
        • Magnar:我很难想象任何现实世界的情况,HTML 的重大变化不需要 CSS 的变化。
        • 但是大多数变化肯定不是实质性的,Jokepu?
        • 诚然,大多数变化都不是实质性的。但我会称任何更改标签的更改,例如,从 div 到 p,都是实质性的。
        【解决方案4】:

        除了两个选择器的不同语义之外,请阅读:Speed of CSS

        【讨论】:

          【解决方案5】:

          如果你想在多个 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>
          

          【讨论】:

            【解决方案6】:

            将 div 添加到选择器的开头会在 css 规则和 html-document 之间创建额外的依赖关系。突然更改元素类型也需要您更改 css,没有充分的理由。

            对于需要指定元素类型来区分两个规则的场景,我建议改为更改类名。不要指望那个 div 总是一个 div。作为 p 或字段集或标签可能更有意义。

            避免不必要的依赖。

            低特异性 css 规则是一个问题,但添加元素类型不是解决方案。如果我的 .price 更改为 div.price,意外匹配的概率只会略微降低。使用外部#id 命名空间会更好。

            【讨论】:

              【解决方案7】:

              将元素选择器 (div) 添加到规则中会增加规则的 specificity,使其比通用类选择器 (.something) 更重要

              它还使您的 CSS 更具可读性。如果您的所有类选择器都没有预先添加元素,这意味着您的类是模棱两可的,并且可以应用于任何元素。 (这可能是意图,但更多时候不是)

              如上所述,使用元素名称会在速度上进行权衡,但几乎不会引起注意。

              【讨论】:

                【解决方案8】:

                类应该具有良好的结构、功能性和原子性。如果您认为自己会遇到类似的情况,有时最好将其缩小到 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 {}
                

                【讨论】:

                  【解决方案9】:

                  除非您在其他地方重用 something 类,否则这不会有什么不同,当然您没有应该使用 CSS 优先级模式解决的冲突。如果是这种情况,div.something 的优先级高于.something,因为它更具体。从CSS2 SpecificationCalculating a selector's specificity

                  【讨论】:

                    猜你喜欢
                    • 2016-05-11
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2019-02-20
                    • 2017-02-26
                    相关资源
                    最近更新 更多