在其他CSS选择器上使用元素ID /类名

Question

我应该尝试使用其他CSS选择器而不是元素ID /类名,反之亦然.

例如:body > header nav ul+ul { ... }当我能做到#socialnav { ... }同样的事情时.

示例HTML代码(显然在代码中的其他地方有子导航的标题):

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

对此有何共识？我的意思是,我发现使用CSS选择器可以管理它,但是有缺点吗？

Answer 1

您的第一个指导原则应该是保持标记语义.以上您的标记就是一个很好的例子-你正在使用header,nav以及ul在语义上有意义的方式标记.

您的第二个指导原则应该是保持关注点(例如,内容和表达)的分离.如果在标记中添加类名或id不会对语义产生任何影响,并且您能够创建CSS选择器,那么您应该避免在标记中添加额外的噪声.

但是,有时候,类名和id非常有用(不仅在CSS中,而且在JavaScript中),所以它们有它们的位置.如果不需要它们就不要诉诸它们,因此会给你的标记添加不必要的混乱.