Question

我最近有一次转向SASS来编写我的CSS。我在Wordpress中构建网站。我开发了一种CSS编写方法，我认为这是一种通过特定的Wordpress“页面”组织CSS的智能方法。我的方法是：

1）通过一些php魔术，我将每个新的Wordpress“页面”一直放在body标签中。因此，如果我的网站有4个页面，则每个页面上的正文标记都有一个唯一的类，如下所示：，等等......

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

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

但是，我需要在第4页上以不同的方式设置p标签内的范围。很容易，我想。我是我的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％有效的。

所以我的问题是：

这只是编写CSS的一种可怕方法吗？（我是否需要重写所有内容以消除如此多的嵌套？）
为什么IE9（及其下）只是停止阅读我的CSS，如果涉及到包含太多选择器的CSS规则？

我已经使用了各种“选择器计数器”工具，根据它们，我的CSS表格远远低于IE9规定的限制：他们告诉我我的样式表有1744个选择器。

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

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

Answer 1

这只是编写CSS的一种可怕方法吗？（我是否需要重写所有内容以消除如此多的嵌套？）

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

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

.module {
    color : red;
    .price {

    }        
}

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

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

*为什么IE9（及其下）只是停止阅读我的CSS，如果涉及到包含太多选择器的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嵌套，如果不是为了达到目标而最终得到＆＃34;最少量的必要选择器＆＃34;在CSS样式表中肯定会导致大量的css选择器。

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

我的解决方案是简单地减少我的嵌套，IE读取样式表就好了。小的筑巢减少 - 使用一般规则＆＃34;不要嵌套4个以上的深度＆＃34;在生成的CSS中消除了大量规则。

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

2 个答案: