css - SASS 嵌套导致 IE 的特定选择器过多

Question

我最近改用 SASS 来编写我的 CSS。我在 Wordpress 中建立网站。我开发了一种 CSS 编写方法，我认为这是一种通过特定 Wordpress“页面”组织 CSS 的聪明方法。我的方法是:

1) 通过一些 php 魔法，我给每个新的 Wordpress“页面”一个唯一的类，一直到 body 标签。因此，如果我的站点有 4 个页面，则每个页面上的 body 标记都有一个唯一的类，如下所示: , , 等...

我认为这会给我一个很好的“捷径”，用于设置出现在多个页面上的 CSS 元素的样式，但我需要在每个页面上设置不同的样式。例如，假设我在网站的所有 4 个页面上都有此标记:

<section class="module">
    <div class="price">
        <div class="cenetered">
            <p>some text <span>text</span></p>
        </div>
    </div>
</section>

但是，我需要 p 标签内的跨度在第 4 页上采用不同的样式。我想很简单。我是 SASS，我将只使用我独特的页面主体类并执行此操作:

.page1, .page2, .page3 {

    .module {
        color:red;

        .price {
            color:blue;

            .centered {
                color:green;

                p span {color:yellow}

            }
        }   
    }
}

.page4 {

    .module {
        color:black;

        .price {
            color:black;

            .centered {
                color:black;

                p span {color:black}

            }
        }   
    }
}

所以第一个 SASS block 用于我的前 3 页，第二个 block 用于我的第 4 页。它完全按照我想要的方式设计所有内容，并且对我来说基本上模仿我的 HTML 嵌套和我的 SASS 嵌套具有组织意义。当然，由于我对 SASS 嵌套非常具体，如果我想在我的 SASS 页面下方覆盖 CSS 规则，我需要对我的嵌套同样具体(或使用我喜欢的 !important 规则)避免)。

我认为使用此方法一切都很好——在我的所有浏览器中看起来都很棒，直到我查看 IE9。我在 IE9 开发人员工具中注意到我的 CSS 文件只是在中途“停止”并且我的一半规则甚至没有被加载。我检查了更多，我注意到我的 SASS 方法正在为我尝试设置样式的每个元素输出大量选择器/规则。

上面的 .page1、.page2、.page3 嵌套中的 span 标签示例输出了数十条规则。我有点意识到会发生这种情况，但我认为这没有问题，因为我的 CSS 是 100% 有效的。

所以我的问题是:

1. 这只是一种糟糕的 CSS 编写方法吗？ (我需要重写所有东西来消除这么多嵌套吗？)

2. 如果 CSS 规则有太多选择器，为什么 IE9(及更低版本)会停止读取我的 CSS？

我使用了各种“选择器计数器”工具，根据它们，我的 CSS 表远低于 IE9 强加的限制:它们告诉我我的样式表有 1744 个选择器。

这是我的工作表:http://wallstreetprep2.com/wp-content/themes/wallstreetprep/style.css

我担心我需要重写我的 SASS 并摆脱 body 标签级别的嵌套？

Answer 1

Is this just a terrible method of writing CSS? (Do I need to rewrite everything to eliminate so much nesting?)

如果某些标记对大多数页面都有基本样式，则无需将所有 .module 包装在 .page1, .page2, .page3 选择器中。

我宁愿建议为基本样式使用(作为一般方法)简短且不太具体的选择器

.module {
    color : red;
    .price {

    }        
} 

然后覆盖异常的样式，将 .module 类包装到 .page4

.page4 {
    .module {
       color : red;
       .price {
          ...
       }        
    }
} 

---

*Why does IE9 (and under) just stop reading my CSS if it comes to a CSS rule with too many selectors? *

这可能是一个解析问题，可能是由于其中的一个或多个 392 validation errors在样式表中和/或可能存在使用 SASS 生成的长 4400 字符的巨大规则，例如

.selfstudy .products ul li .module h2 .courseicon, .selfstudy
.products ul li .bluemodule h2 .courseicon, .selfstudy .products ul li
.page-template-page- 1col-php .customersspeak .speak_small p h2
.courseicon, .page-template-page- 1col-php .customersspeak
.speak_small .selfstudy .products ul li p h2 .courseicon, .selfstudy
.products ul li .wspblog #sidebar .widget_text h2 .courseicon,
.wspblog #sidebar .selfstudy .products ul li .widget_text h2
.courseicon, .selfstudy .products ul li .single-blogposts #sidebar
.widget_text h2 .courseicon, .single-blogposts #sidebar .selfstudy
.products ul li .widget_text h2 .courseicon, .selfstudy .products ul
li .archive #sidebar .widget_text h2 .courseicon, .archive #sidebar
.selfstudy .products ul li .widget_text h2 .courseicon, .selfstudy
.products ul li .page-id-2310 .pricebox h2 .courseicon, .page-id-2310
.selfstudy .products ul li .pricebox h2 .courseicon, .selfstudy
.products ul li .page-id-2406 .pricebox h2 .courseicon, .page-id-2406
.selfstudy .products ul li .pricebox h2 .courseicon, .selfstudy
.products ul li .excel a[title="pdf"] h2 .courseicon, .excel
.selfstudy .products ul li a[title="pdf"] h2 .courseicon, .selfstudy
.products ul li .excel a[title="pdf2"] h2 .courseicon, .excel
.selfstudy .products ul li a[title="pdf2"] h2 .courseicon, .selfstudy
.products ul li .mycourses form h2 .courseicon, .mycourses .selfstudy
.products ul li form h2 .courseicon, .mycourses .products ul li
.module h2 .courseicon, .mycourses .products ul li .bluemodule h2
.courseicon, .mycourses .products ul li .page- template-page-1col-php
.customersspeak .speak_small p h2 .courseicon, .page- template-page-
1col-php .customersspeak .speak_small .mycourses .products ul li p h2
.courseicon, .mycourses .products ul li .wspblog #sidebar .widget_text
h2 .courseicon, .wspblog #sidebar .mycourses .products ul li
.widget_text h2 .courseicon, .mycourses .products ul li .single-
blogposts #sidebar .widget_text h2 .courseicon, .single-blogposts
#sidebar .mycourses .products ul li .widget_text h2 .courseicon,
.mycourses .products ul li .archive #sidebar .widget_text h2
.courseicon, .archive #sidebar .mycourses .products ul li .widget_text
h2 .courseicon,  .mycourses .products ul li .page-id-2310 .pricebox h2
.courseicon, .page-id-2310 .mycourses .products ul li .pricebox h2
.courseicon, .mycourses .products ul li .page-id-2406 .pricebox h2
.courseicon, .page-id-2406 .mycourses .products ul li .pricebox h2
.courseicon, .mycourses .products ul li .excel a[title="pdf"] h2
.courseicon, .excel .mycourses .products ul li a[title="pdf"] h2
.courseicon, .mycourses .products ul li .excel a[title="pdf2"] h2
.courseicon, .excel .mycourses .products ul li a[title="pdf2"] h2
.courseicon, .mycourses .products ul li form h2 .courseicon, .single-
partnerpages .products ul li .module h2 .courseicon, .single-
partnerpages .products ul li .bluemodule h2 .courseicon, .single-
partnerpages .products ul li .page-template-page-1col-php
.customersspeak .speak_small p h2 .courseicon, .page-template-page-
1col-php .customersspeak .speak_small .single-partnerpages .products
ul li p h2 .courseicon, .single-partnerpages .products ul li .wspblog
#sidebar .widget_text h2 .courseicon, .wspblog #sidebar .single-
partnerpages .products ul li .widget_text h2 .courseicon, .single-
partnerpages .products ul li .single-blogposts #sidebar .widget_text
h2 .courseicon, .single-blogposts #sidebar .single-partnerpages
.products ul li .widget_text h2 .courseicon, .single-partnerpages
.products ul li .archive #sidebar .widget_text h2 .courseicon,
.archive #sidebar .single-partnerpages .products ul li .widget_text h2
.courseicon, .single-partnerpages .products ul li .page- id-2310
.pricebox h2 .courseicon, .page-id-2310 .single-partnerpages .products
ul li .pricebox h2 .courseicon, .single-partnerpages .products ul li
.page- id-2406 .pricebox h2 .courseicon, .page-id-2406 .single-
partnerpages .products ul li .pricebox h2 .courseicon, .single-
partnerpages .products ul li .excel a[title="pdf"] h2 .courseicon,
.excel .single-partnerpages .products ul li a[title="pdf"] h2
.courseicon, .single-partnerpages .products ul li .excel
a[title="pdf2"] h2 .courseicon, .excel .single-partnerpages .products
ul li a[title="pdf2"] h2 .courseicon, .single-partnerpages .products
ul li .mycourses form h2 .courseicon, .mycourses .single-partnerpages
.products ul li form h2 .courseicon