HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 有没有理由不使用单个非嵌套类名作为CSS选择器?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有一个容器和一个项目列表,我可能有以下 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,据说整体表现已经变好了.但是好多少?更短的路还更快吗?

解决方法

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

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

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

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

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

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

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

大佬总结

以上是大佬教程为你收集整理的html – 有没有理由不使用单个非嵌套类名作为CSS选择器?全部内容,希望文章能够帮你解决html – 有没有理由不使用单个非嵌套类名作为CSS选择器?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。