2

我正在使用 Sass 将我的 SCSS 样式表编译成单个assembled.css以减少 HTTP 请求。为了命名单个页面的样式,我将每个页面特定的 CSS 文件包装在该页面<body>元素的 ID 选择器中 - 例如:

body#support {

    .introduction {
        @extend %dropcap;
    }

}

在 nanoc(使用 ERB)中,我有一个帮助程序,它根据 HTML 文件夹结构为每个页面的正文分配一个以破折号分隔的唯一 ID,因此根页面将是#support#products,而它们的子页面将具有类似 `#products 的 ID -巨型空间激光”。

我想制定一组仅适用于这些“产品”子页面(不包括根级#products页面本身)的 SCSS 规则。如果我为此使用属性选择器而不是 ID,有什么我应该注意的关于特异性的,如下所示?

body[id^="products-"] {

    .introduction {
        @extend %dropcap;
    }

}

我真的不想使用!important,但我确实想确保这些特定于页面的规则优先于在 @import 顺序中位于它们之前的 '_base.scss' 部分中设置的样式。鉴于我可以完全控制 HTML 结构,理论上我也可以在 Sass 文件中使用 Erb 来替换以逗号分隔的 ID 列表,如下所示:

body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {

    .introduction {
        @extend %dropcap;
    }

}

- 但这似乎很不雅。提前致谢。

编辑:

我以非常依赖级联的方式编写了其他样式:

  1. 规范化 CSS
  2. HTML5 Boilerplate 和我自己的明智的家规
  3. CSS 库(在本例中为 Bourbon & Neat)
  4. 一个“_source.scss”,它依次导入自己的 mixins 和占位符选择器。
  5. 一个“_base.scss”,用于设置每个页面的默认布局框架。
  6. 一系列 .scss 文件用于每个页面的单独内容样式 - 我希望在必要时覆盖base.scss 布局决策(如果页面需要严重偏离规范)。

无论哪种方式,这些单独的页面样式表肯定需要早期的默认设置具有更高的特异性,因为它们是为特定目的和页面编写的。我故意不使用任何 ID 选择器,除了这个特定目的 - 命名空间页面样式表。

使用,说

.services .sharktraining .introduction .disarmingJoke {}  --0,0,4,0

在“_base.scss”中会超过

body[id^="products-"] .disarmingJoke {}                   --0,0,2,1

在更进一步的级联“products.scss”中,不是吗?(注意,我知道需要使用四个类是一种糟糕的做法,我只是不想担心某些东西会从命名空间中溜走)。

我想还有另一个 - 非常肮脏的 - 选项:多次重复 body[id^="products-"]选择器,甚至超过最具体的班级强度规则。

4

1 回答 1

1

这将不得不取决于您如何编写其他样式以及它们是否应该优先(参见:http ://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-应该知道/ )。

如果您完全匹配选择器,但将其中一个与您的主体选择器相匹配,则前缀一个将足够具体,无论如何都可以优先考虑(即使顺序颠倒了):

body[id^="products-"] .widget {
    color: green;
}

.widget {
    color: red;
}

.widget是绿色的,因为第一个选择器比第二个选择器更具体。

在 id 上使用属性选择器的唯一问题是您是否关心 IE6。如果您对此感到担忧,Dean Edwards 的 IE7 JS 库可以为您提供帮助: http ://code.google.com/p/ie7-js/

如果可以选择更改页面信息附加到 body 元素的方式,我的建议是让父目录为 id,子页面为类:

<body id="products" class="giantspacelaser" />

这样您就可以保留 id 的特异性:

// excludes the body#products page, which wouldn't have a class set at all
body[class]#products { 
    // styling here
}
于 2012-12-27T13:11:26.597 回答