Question

我做了一些研究，无法明确找到最佳实践是否为嵌套元素使用类选择器或标签选择器的答案。说我有HTML：

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

我可以写：

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

或

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

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

Answer 1

对于更具体的CSS，您必须使用以下两者： -

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

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

Answer 2

就我个人而言，我认为在$（'。class1 .class2'）规则中使用两个类可以更有效地匹配并且是更好的练习。也许很少需要3个班级。

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

Answer 3

这取决于项目的复杂程度和团队的偏好。

在性能方面，选择类似这样的嵌套项

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

转移到

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

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

为了减轻这种风险，您可以尝试使用名称约定来帮助您防止以昂贵的方式选择嵌套元素。

其中一种方法称为 BEM 。

简言之，会议如下：

.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>

在这种情况下，您可以选择指导您的课程

.componenet__list-flag {}

更多信息：

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Answer 4

大多数情况下你不会尝试匹配所有的img因此优先选择

membertype <= 4

这是Harsh Sanghani的另一个好习惯。

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

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

4 个答案: