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

Question

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

1) 通过一些 php 魔术，我在正文标记中为每个新的 Wordpress“页面”提供了一个独特的类。因此，如果我的网站有 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 块用于我的前 3 页，第二个块用于我的第 4 页。它完全按照我想要的方式设置所有样式，并且对我来说具有组织意义，基本上可以用我的 SASS 嵌套来模仿我的 html 嵌套。当然，由于我对我的 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

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

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

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

.module {
    color : red;
    .price {

    }        
} 

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

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

---

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

这可能是一个解析问题，可能是由于样式表中的一个或多个 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

Answer 2

深度 SASS 嵌套，如果不是为了在 CSS 样式表中使用“最少的必要选择器”而编写的，那么肯定会导致大量的 CSS 选择器。

所有非 IE 浏览器似乎都能读取整个 CSS 样式表，无论它包含多少个选择器或规则，但 IE9 只是在 4095 条规则之后停止读取样式表：http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx

我的解决方案是简单地减少我的嵌套，并且 IE 可以很好地读取样式表。少量嵌套减少——使用“嵌套深度不要超过 4”的一般规则消除了生成的 CSS 中的大量规则。