Fatal编程技术网
  • css/
  • 在主体元素上使用ID属性选择器（而不是#ID）来命名CSS文件的名称空间是否容易出错？

在主体元素上使用ID属性选择器（而不是#ID）来命名CSS文件的名称空间是否容易出错？

css sass

在主体元素上使用ID属性选择器（而不是#ID）来命名CSS文件的名称空间是否容易出错？,css,css-selectors,sass,erb,css-specificity,Css,Css Selectors,Sass,Erb,Css Specificity,我正在使用Sass将我的SCSS样式表编译成单个assembled.css，以减少HTTP请求。为了命名各个页面的样式，我将每个页面特定的CSS文件包装在该页面的元素的ID选择器中，例如： body#support { .introduction { @extend %dropcap; } } 在nanoc（使用ERB）中，我有一个助手，它根据HTML文件夹结构为每个页面的主体分配一个破折号分隔的唯一ID，因此根页面将是\support或\products，

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

body#support {

    .introduction {
        @extend %dropcap;
    }

}
在nanoc（使用ERB）中，我有一个助手，它根据HTML文件夹结构为每个页面的主体分配一个破折号分隔的唯一ID，因此根页面将是
\support
或
\products
，而它们的子页面将有一个类似“products giantspacelaser”的ID

我想制定一套仅适用于这些“产品”子页面的SCSS规则（不包括根级别的
#products
页面本身）。如果我使用一个属性选择器而不是一个ID来实现这一点，我是否应该注意特殊性，如下所示

body[id^="products-"] {

    .introduction {
        @extend %dropcap;
    }

}
我真的不想使用
！重要信息
，但我确实希望确保这些特定于页面的规则优先于在@import order中位于它们之前的“_base.scss”部分中设置的样式。鉴于我完全控制HTML结构，理论上我也可以在Sass文件中使用Erb替换逗号分隔的ID列表，如下所示：

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

    .introduction {
        @extend %dropcap;
    }

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

编辑：

我以一种非常依赖级联的方式编写了我的其他风格：

  • 标准化CSS
  • HTML5样板文件和我自己的合理内部规则
  • CSS库（在本例中为Bourbon&Neat）
  • 一个“_source.scss”，它依次导入自己的mixin和占位符选择器
  • 一个“_base.scss”，用于设置每个页面的默认布局框架的样式
  • 一系列的.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-”]
    选择器，数量甚至超过最具体的类强度规则。

    这将取决于您如何编写其他样式以及它们是否应该优先（请参阅：）

    如果完全匹配选择器，但在其中一个选择器前面加上正文选择器，则带前缀的选择器将足够具体，无论发生什么情况（即使顺序颠倒）：

    .widget
    将为绿色，因为第一个选择器比第二个选择器更具体

    在ID上使用属性选择器的唯一问题是您是否关心IE6。如果您对此感到担忧，Dean Edwards的IE7 JS库可以帮助您：

    如果更改页面信息附加到body元素的方式是一个选项，我的建议是将父目录设置为id，子页面设置为class：

    <body id="products" class="giantspacelaser" />
    谢谢，这真的很有帮助！不幸的是，我认为我不能做ID+类的把戏（顺便说一句，很聪明），因为我可能需要深入到两层以上——这是一个相当大的网站，理想情况下，我希望创建一个具有真正健壮性的框架，以便它可以在任何地方使用。我不必适应IE6（感谢上帝），但我仍然担心使用比名称空间更多的类强度选择器-我会更新这个问题。我会接受这个问题，因为我肯定会在我知道只有两个层次的项目中使用ID/类对。我想我终于接受了这样一个观点：肯定地说，我应该列出一个组中的所有ID来设置该组的样式，例如使用
    body#prod one，body#prod two{…}
    。再次感谢！ 
    <body id="products" class="giantspacelaser" />

    // excludes the body#products page, which wouldn't have a class set at all
body[class]#products { 
    // styling here
}