为什么不建议在CSS中使用ID进行选择？

Question

在CSSLint (csslint.net)中,他们不建议使用id选择元素.我相信CSS Lint,因为它是由聪明的人写的,他们非常了解CSS.但我想知道这是什么原因？为什么选择id不好的东西？

Answer 1

我不同意从不使用ID来选择元素的想法,但我确实理解了推理.

通常,当一般形式足够时,开发人员将使用非常高的特异性选择器:

#foo #bar #baz .something a {
    text-decoration: underline;
}

可能写得更好

.something a {
     text-decoration: underline;
}

另外,写作样式如:

#foo-1,
#foo-2,
#foo-3,
#foo-4 {
    color: #F00;
}

写得更好:

.foo {
    color: #F00;
}

我与CSSLint的区别在于涉及重用的结构ID.

我经常用这种结构标记页面:

<div id="page">
    <div id="page-inner">
        <header id="header">
            <div id="header-inner"></div>
        </header>
        <nav id="nav">
            <div id="nav-inner"></div>
        </nav>
        <div id="wrapper">
            <div id="wrapper-inner">
                <div id="content">
                    <div id="content-inner">
                        <article></article>
                        ...
                    </div>
                </div>
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <div class="module"></div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer-inner"></div>
        </footer>
    </div>
</div>

因为我知道,结构是一致的,我不介意使用#page,#header,#nav,#wrapper,#content,#sidebar,和#footer在我的CSS用于扫除特定区域的样式.这些样式与这种特殊的结构紧密结合,这使它们不再可重复使用 ; 因为我重用了结构,它们是可重用的.需要记住的重要一点是,在选择器中使用ID非常具体,应谨慎使用.

关于特异性的几句话:

一般来说,应该使用最低可能的特异性选择器来进行正确的选择:

如果您的目标是所有<a>元素,那么使用它是有意义的a.
如果您要定位其中的所有<a>元素<div class="foo">,那么使用它是有意义的.foo a.
如果您要定位其中的所有<a>元素<div id="bar">,那么使用它是有意义的#bar a.但是,您可以使用较低的特异性选择器.[id="bar"] a具有相同的特异性.foo a,这意味着您仍然可以通过ID定位特定元素,而无需创建具有不必要的高特异性的选择器.

我通常不建议使用[id="XXXX"]选择器来选择[id]属性,因为它很冗长并且可能会引起混淆.我不建议使用[data-id="XXXX"]选择的基础上选择自定义[data-*]属性更密切相关样式DOM节点的当前状态.

Answer 2

CSSLint为他们提出建议的原因提供了指导:

不应在选择器中使用ID,因为这些规则与HTML紧密耦合,不可能重用.最好在选择器中使用类,然后将类应用于页面中的元素.此外,ID会影响您的特异性,并可能导致特异性战争.

(链接)

基本上,如果您构造代码以使用类而不是ID,那么您的代码可以更通用且可重用,这通常是一件好事.此外,特异性是一个难以理解的问题,并且可能导致难以找到的错误,因此如果省略ID选择器,则不太可能以意外方式解决冲突规则.

Answer 3

首先:

像Lint一样,CSS Lint是一种伪装成验证而非权威的观点.

我已经在这里待了五年.我曾在非常大的零售网站,互动代理商,作为独立承包商工作,目前在SaaS公司工作.

身份证明非常糟糕的想法,IMO只是一个想法,如果你在处理团队时你的CSS-fu开始时就不那么好了.

良好,灵活的CSS,IMO遵循以下一般最佳实践:

• 始终从一般到特定.例如,一般正文的字体系列和最常见的字体大小应该只在一个地方声明.当您向上移动到通常涉及使用类的选择器时,您将开始覆盖font-size.当需要将一个基本上未使用的字体系列应用于非常特定的HTML子集时,就可以在容器上使用ID来获取正文文本变体的元素.

• 应用属性越普遍,覆盖越容易,您不应该担心意外覆盖最常见的属性.例如,这body#some_id div是一个非常糟糕的选择器,因此使用它.在第二层(有3 ... ish),你通常需要处理更多与通常重复使用的元素捆绑在一起的分类容器,因此偶然覆盖这些属性应该有点困难.当你在各处都有成堆的多级选择器时,"偶然"会发生更频繁的事情.在最后一层中,您应该处理的不是可重用元素,而是覆盖文档的高度特定部分.在这些情况下使用ID是一种理想的做法,而不是坏的做法,但最好谨慎使用ID,并且只能用于ID实际需要更改的项容器中元素的特定属性.

• 选择器越具体,就越难以意外地将其打破.具体而言,我不只是指元素上的ID.我的意思是ID'd容器元素靠近您实际定位的元素.然而,有意覆盖应该总是涉及最小的努力,这是ID实际帮助而不是阻碍你的地方(见下面的例子).如果你发现自己处于"用完身份证,课程和标签"的位置,我建议你采取暴力行为(至少是虚构的暴力).但严重的是,有人应该受到打击.

• 避免使用冗长的选择器列表:每当您经常使用4+选择器值进行声明时,您应该开始觉得自己"做错了".在计算时我不会将其视为标记/值,因为明智地使用它是可维护性和性能的优秀实践.

• 避免特异性军备竞赛:你知道这个人."不要弄乱我的东西"新秀谁决定了最好的方法来掩盖他的屁股是使用他可以从身体开始的每个标签,选择器和ID.在他停下来之前,不要雇用那个人或打他.但是即使对于更具前瞻性的球队,如果你没有(谨慎地)在有意义的地方为选择者增加更多的重量,那么军备竞赛仍然可以无辜地开始.

特别是极简主义的方法是巨大的.您越依赖HTML放置以避免首先需要CSS,就越好.你在全球范围内分发最一般的风格所做的更好的工作,你在更具体的环境中担心的越少.更精确定位和简洁的高度特定的属性覆盖越多,它们就越容易管理.而这就是全面的非身份证政策是愚蠢的IMO.

什么更实用,更直接覆盖？

这个:

body .main-content .side-bar .sub-nav > ul > li > button

或这个？

#sub-nav button

如果你一般工作独奏或只能做小项目跟上做Web开发为生,而在演讲让您真正的金钱的外观,上一个看起来愚蠢的,不可能给你,但是当你与一个团队工作,你"再下一个唯一的类策略,而你刚刚烧了没有使用足够的高特异性近日,这将是很容易开始加入越来越多类和标记你的东西(只是为了避免在短期内完成的麻烦 - 你当然会在以后更改它,导致CSS文件中出现大量无法预测的混乱.

因此:尽量不要使用多个ID,并且只能用于不包含其他容器的容器的本地属性.尽量不要使用一个或两个以上的课程.避免使用从on-high开始定位元素的类和ID(它们代表的容器上面有许多祖先节点).在大多数情况下,超过3-4个标签可能太多,直到需要对新手进行一些维护或训练/打屁股.遵循boyscout规则.当你安全的时候,当你去的时候,那些重要的东西和明显过于具体的选择器.

但坚持使用经验法则而不是CSS"法则",并确保根据经验评估这些想法.不要相信任何人或任何工具,如"CSS布局"可能具有的变量那么多,如"永远不会使用ID"这样的毯子语句.就我而言,这只是noob kool-aid,如果他们想声称自己是专家,负责的作者现在应该更清楚.