0

我正在努力建立一种可靠且响应迅速的编码风格。我的一般问题涉及样式化子类。我先举个例子：

    <div class="pageHeader">
        <div class="cnt">
            <div class="logo">
                <a href="#" title="logo">My Logo</a>
            </div> <!-- .logo-->
            <div class="menu">
            </div> <!-- .menu-->
        </div> <!-- .cnt-->
    </div><!-- .pageHeader -->

我使用 pageContainer / pageHeader/ pageBody / pageFooter 表示法作为我的主页结构。那么问题来了：我应该如何编写特定的选择器，例如 .logo ？我应该使用哪种表示法以及为什么：

.pageHeader .cnt .logo a {}
.pageHeader .logo a {}
.cnt logo a{}
.logo a{}

显然，如果您在这种情况下对符号有更好的想法，请告诉。

4

5 回答 5

1

2号线

.pageHeader .logo a {}

原因是我不想担心在应用程序的其他地方重用通用类名，所以我想通过它的“组件”容器来限定所有内容。另一方面，我不想默认为最大特异性水平，这就是我不做第 1 行的原因

于 2012-05-12T19:14:20.833 回答
1

在您提供的特定示例中，最好使用#logoand #logoHrefid 选择器，因为它们将在整个页面中是唯一的。此外，最好尽可能使用子选择器（.pageHeader > .cnt > .logo），因为浏览器从右到左评估选择器，因此最好尽早切断 DOM 遍历。然而，这仅适用于具有大量元素/规则的大页面是完全合理的。

于 2012-05-12T19:24:05.977 回答
1

您应该尽可能使用最短的 CSS 选择器，该选择器足够具体以选择您想要的内容，但不要太模糊以至于可能会选择其他内容。

CSS 选择器从右到左读取，这意味着 .pageHeader .logo 会找到 .logo，然后读取 DOM 以确保 .pageHeader 的实例是父级，从而选择该 .logo 元素。但是如果您要使用 .pageHeader .cnt .logo，它会找到所有 .logo，然后确保 .cnt 是父级，然后检查 .pageHeader。.cnt 检查是不必要的（这通常取决于您的标记，但希望您明白）

更好的是，为您的徽标提供一个 ID (#logo)，然后使用 #logo 选择它。ID 的性能更高，其次是类，依此类推。

于 2012-05-12T19:26:44.897 回答
0

如果我的意图正确，我认为SASS将为您提供更好的服务。

于 2012-05-12T19:16:15.720 回答
0

首先在 html5 中存在 web 语义，您可以使用 tag , , , 最好使用它而不是 class 或 id pageHeader、pageFooter 等。

第一个、第三个和第四个选项效果很好。

我建议将 id="logo" 更改为 class="logo" 并使用：

#logo a {}

因为徽标在所有 html 代码中肯定是唯一的。

于 2012-05-12T19:24:18.237 回答