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

Question

我最近在写CSS的时候用了SASS。我在WordPress上建网站。我开发了一种CSS编写方法，我认为这是一种通过特定的Wordpress“页面”组织CSS的聪明方法。我的方法是：

1）通过一些php魔法，我给每个新的Wordpress“page”一个独特的类，一直在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页。我想，很容易。我说，我只需要使用我唯一的页面主体类来完成以下操作：

.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块用于我的前3页，第二个块用于我的第4页。它完全按照我想要的方式对所有内容进行样式化，并且对我来说组织意义在于基本上用我的SASS嵌套来模拟我的html嵌套。当然，由于我对我的SASS嵌套非常具体，如果我想在我的SASS页面下覆盖CSS规则，我需要对我的嵌套也同样具体（或者使用我喜欢避免的！重要规则）。

我认为这个方法一切都很好--在我所有的浏览器中看起来都很棒，直到我在IE9上看到。我在IE9开发工具中注意到，我的CSS文件在中途“停止”了，我的一半规则甚至都没有加载。我检查了更多，我注意到我的SASS方法为我尝试样式化的每个元素输出了大量的选择器/规则。

仅.page1、.page2、.page3嵌套中的span标记的上述示例就输出了几十条规则。我有点意识到这会发生，但我不认为这有问题，因为我的CSS是100%有效的。

所以我的问题是：

>

这仅仅是一种糟糕的CSS编写方法吗？（我需要重写所有的东西来消除这么多的嵌套吗？）

为什么IE9（以及以下版本）会停止读取我的CSS，如果它遇到一个有太多选择器的CSS规则呢？

我使用过各种“选择器计数器”工具，根据它们的说法，我的CSS表完全不受IE9的限制：它们告诉我，我的样式表有1744个选择器。

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

我担心我需要重写我的SASS和摆脱嵌套到身体标签级别？

Answer 1

这仅仅是一种糟糕的CSS编写方法吗？（我需要重写所有的东西来消除这么多的嵌套吗？）

如果某些标记具有大多数页面的基本样式，那么就不需要在.page1、.page2、.page3选择器中包装所有.module。

我更愿意建议（作为一种通用方法）为基本样式使用简短且不太具体的选择符

.module {
    color : red;
    .price {

    }        
} 

然后重写异常的样式，将.module类包装到.page4中

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

*为什么IE9（及以下版本）会停止读取我的CSS，如果CSS规则中有太多的选择器？*

这可能是一个解析问题，可能是由于样式表中的392个验证错误中的一个或多个，和/或可能是由于使用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