CSS中匹配嵌套元素的最佳实践

我做了一些研究，但无法确定对嵌套元素使用类选择器还是标记选择器是最佳做法。假设我有HTML：

<ul>
    <li class="list-item-content" >
            <img src="/images/flags/fr.png" class="country-flag">
    </li>
</ul>

或

---

哪一种是最佳实践？由于浏览器从右到左匹配规则，我认为第二种方式比第一种方式更好，浏览器首先匹配所有图像，然后检查父项….

有关更具体的css，您必须同时使用这两种方式，如下所示：-

.list-item-content img.country-flag{
    vertical-align: middle;     
}

---

它将定义更清晰的嵌套结构。

大多数情况下，您不会尝试匹配所有img，因此首选第二种约定

.list-item-content .country-flag{
    vertical-align: middle;     
}

这也是Harsh Sanghani的另一个好做法

.list-item-content img.country-flag{
    vertical-align: middle;     
}

---

就我个人而言，我认为在规则中使用两个类，如$（'.class1.class2'）更有效地匹配，是更好的实践。而且可能很少需要3节课

---

如果您非常确定某个类是唯一的，那么$（'.class1'）可能就足够了。

这取决于项目的复杂性和团队的偏好

在性能方面，选择嵌套项时使用如下内容

 .list-item-content .country-flag{}

哪个翻译成

 select  .country-flag elements descendant of .list-item-content element

可能会对大型项目（DOM）或功能有限的设备（如智能电视或旧移动设备）造成性能损失

为了降低这种风险，您可以尝试使用名称约定，这将帮助您避免以昂贵的方式选择嵌套元素

其中一种方法称为

公约简而言之如下：

.block represents the higher level of an abstraction or component.
.block__element represents a descendent of .block that helps form .block as a whole.
.block--modifier represents a different state or version of .block.

因此，您可以像这样重写HTML：

<div class="componenet">
<ul>
    <li class="componenet__list" >
            <img src="/images/flags/fr.png" class="componenet__list-flag">
    </li>
</ul>
</div>

更多信息请点击此处：

---

你说得对。第二种方法更好，这正是你提到的原因。我想你回答了你自己的问题。此外，我认为像$（'.class1 img'）和$（'.class1.class2 img'）这样的规则也非常实用，只要标准足够独特。实际上，我还不关心你提到的从右到左匹配的效率问题，因为方便、清洁和可读性似乎更重要。

.block represents the higher level of an abstraction or component.
.block__element represents a descendent of .block that helps form .block as a whole.
.block--modifier represents a different state or version of .block.

<div class="componenet">
<ul>
    <li class="componenet__list" >
            <img src="/images/flags/fr.png" class="componenet__list-flag">
    </li>
</ul>
</div>

.componenet__list-flag {}