1

假设我有一个名为.logoexample 的选择器类，html 中的用法可能与此类似。

<div class="nav">
    <a class="logo"></a>
</div>

我看到他们中的很多都采用后代子格式，如下所示

.nav .logo { 
   width: .. 
   height: .. 
}

像下面这样的单个选择器声明有什么好处？

.logo {
   width: ..
   height: ..
}

我知道 html 标记在层次结构应用程序中会更加整洁，并且它有助于媒体查询调整的可扩展性，但是对于我看到许多以这种方式实现的这个特定徽标示例，我不太确定它的好处。

添加

我知道哪个更具体优先。我想我对可重用性的看法更多。

4

3 回答 3

3

.nav .logo比使用更具体.logo

后一个也将应用于.logo文档中的所有元素，其中.nav .logo将应用于.logo嵌套在具有 class 的元素内的元素.nav。

如果没有必要，您应该避免嵌套样式，因为它不仅会影响性能，而且您最终会编写越来越多的特定规则来覆盖以前的规则。

在这种情况下，它可能会使用.logo一个网站有一个单一的标志，但再次说明，如果设计师正在设计一个客户页面，其中他的.logo每个客户标志目录列表中都有一个类？所以在这种情况下，他将使用.nav .logo他的网站标志，并说他有其他.logo包裹在一个元素中.client_list，所以他将.client_list .logo在这种情况下使用。

于 2013-09-02T06:03:04.270 回答
1

后代的使用并不是一个好主意。那是因为您将 .logo 类与特定容器紧密结合。如果您稍后将标记更改为：

<div class="nav">
</div>
<a class="logo"></a>

另一个好处是您可以在其他地方重用相同的样式。例如，不要为页脚编写另一个 .logo 类。我建议阅读更多关于OOCSS的内容。

如果您在页眉和页脚中有徽标，您最终可能会使用以下样式：

.logo {
   background: url('...') no-repeat;
}
.logo-header {
   background-size: 100px 50px;
}
.logo-footer {
   background-size: 70px 40px;
}

然后使用以下标记：

<header>
   <a class="logo logo-header"></a>
</header>
<footer>
   <a class="logo logo-footer"></a>
</footer>

通常，您在页眉和页脚之间共享一些样式，但仍然有两个地方的特定 css。我发现它更好的方法。

于 2013-09-02T06:04:15.993 回答
0

由于您可以拥有更多元素class="logo"，因此这是一种仅针对元素内部的.nav元素的方法。让其他.logo人一个人呆着。

当然，如果您只想特别针对一个特定对象a，您可能希望给它a一个id以使其独一无二。

于 2013-09-02T06:05:12.560 回答