html – 有没有理由不使用单个非嵌套类名作为CSS选择器？

发布时间：2020-12-14 23:26:01 所属栏目：资源来源：网络整理

导读：如果我有一个容器和一个项目列表,我可能有以下 HTML标记： div class="container food foodcontainer" ul class="list foodlist" li class="listitem fooditems"/li ... 我可以用两种方式设置它们(假设使用纯CSS而不是/ sass或任何其他帮助器).首先,就像通常

如果我有一个容器和一个项目列表,我可能有以下 HTML标记：

<div class="container food foodcontainer">
    <ul class="list foodlist">
        <li class="listitem fooditems"></li>
        ...

我可以用两种方式设置它们(假设使用纯CSS而不是/ sass或任何其他帮助器).首先,就像通常会做的那样：

.food { /* style */ }
.food .list { /* style */ }
.food .list .listitems { /* style */ }

或者,我可以通过详细的描述性类名简单地引用所有内容：

.foodcontainer { /* style */ }
.foodlist  { /* style */ }
.fooditems  { /* style */ }

没有更多的级联关系！是否有理由不为所有内容执行此操作(以便每个元素都由单个类/ id名称引用)？我(以及在相同代码库上工作的人)根本没有发现在可读性方面要好得多;如果有的话,我们会发现更容易掌握的独特和直接名称,也更容易搜索.

有an ancient article一般建议更短,更独特的选择器,以提高性能;在its more recent update,据说整体表现已经变好了.但是好多少？更短的路还更快吗？

解决方法

.food .list {/ * style * /}仅定位列表类中具有类食物的元素的元素.

.food> .list {/ * style * /}仅定位列表类的元素,这些元素是具有类食物的元素的直接子元素.

.list {/ * style * /}以任何具有类列表的元素为目标,无论其父元素如何.

通常,如果您想确保仅定位特定元素中的元素而不是可能具有相同类的任何其他元素,请根据您的需要使用上述第一个或第二个元素.

当然,您也可以为它们提供独特的类以避免链接它们,但是IMO只需要记住您已经使用过的类是不必要的麻烦.此外,我认为它有助于提高可读性,当你链接它们而不是提出独特的类时 – 然后更容易看出这些规则适用于哪些元素.

我不会太担心其中任何一个的表现 – 除非你有大量网站.

您可以阅读有关CSS选择器here的信息.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!