Question

我正在努力构建一个可靠且反应灵敏的编码风格。我的一般问题涉及造型儿童课程。让我先举例说明：

    <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{}

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

Answer 1

第2行

.pageHeader .logo a {}

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

Answer 2

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

Answer 3

你应该使用尽可能短的CSS选择器，它可以选择你想要的，但不要太模糊，以至于它可能会选择其他的。

CSS选择器从右向左读取，这意味着.pageHeader .logo会找到.logo，然后读取DOM以查找确保.pageHeader的实例是父项，从而选择.logo元素。但是如果你要使用.pageHeader .cnt .logo，它会找到所有.logo，然后确保.cnt是父，然后检查.pageHeader。 .cnt检查是不必要的（这一般取决于你的标记，但希望你能得到这个想法）

更好的是，给你的logo一个id（#logo），然后用#logo选择它。 ID更高效，其次是类，依此类推。

Answer 4

如果我的意图正确，我认为SASS会更好地为你服务。

Answer 5

首先在html5中存在web语义你可以使用标签,,,最好用这个而不是class或id pageHeader，pageFooter等。

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

我建议为id =“logo”更改class =“logo”并使用：

#logo a {}

因为徽标在所有HTML代码中都是唯一的。

Css编码风格 - 选择器嵌套

5 个答案: