根据OOCSS第二原则,你不应该有依赖于位置的风格：
报价从https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {…}, create and apply a class that describes the h2 in question, like h2 class=”category”.
让我们举一个实际的例子.假设我有一个标准的2.0设置,正常的身体(白色背景)和一个巨大的页脚(黑色背景).在身体我们有黑色链接,在页脚当然我们需要白色.实现这一目标并不是最简单,最直观的方式：
a{ color: #000; }
.footer a{ color: #FFF; }
如果我遵循OOCSS原则,我必须首先创建一个类：
.inverted{ color: #FFF; }
然后继续将该类添加到我想要反转的每个链接.这似乎很麻烦.
整个语言的目的不是Cascade的风格吗？
我在这里误解了什么吗？
你如何扩展成千上万页的CSS？
在这种情况下……第二个原则是完全合理的……所以使用相同的例子(即假设我们实现了你的解决方案)..让我们说一年后你的公司决定在黑色页脚中创建浅灰色按钮黑色文字：
<!-- inside footer --> <a class="button lightGrey">link</a>
在这种情况下..所有标签都是白色的,因为它们被你的级联覆盖.那么我们将不得不创建另一个只是为了撤消你的解决方案所做的事情：
.footer a.button.lightGrey {
color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/
}
好像我们只是决定默认情况下所有标签都是黑色的(参见最后一条)：
a{ color: #000; }
然后在页脚中我们将创建一个特殊类型的链接,应该是白色的：
.footerLinks { color: #FFF }
然后一年后,一些链接仍然是白色.. greyLight按钮中的其他链接将是黑色的：
<a class="button lightGrey">link</a>
然后在这里我们不必担心撤消任何东西..标签有默认颜色..就是这样.如果2年后有人决定lightGrey按钮内的链接(网站上的任何地方,不仅仅是页脚…这是OOCSS的整个点)应该是红色的……那么这将是OOCSS方法：
.redLink {
color: red;
}
而html将是
<a class="button lightGrey redLink">link</a>
在这种情况下,如果我们取出.lightGrey类无关紧要,或者我们可以在页脚内部或不在页脚内部使用此代码..它们都是相同的…它会产生更可预测和可重复使用的代码..是OOCSS(我很高兴他们终于正式化了这个……非常感谢btw的帖子).
最后一点：要做纯OOCSS,不应该改变a的默认颜色,即{颜色：#000;}是错误的！它应该留给它的默认颜色(蓝色)..每当有人想要改变那种颜色..那么他们必须指定它,即
<a class="redLink">..</a>
所以在这种情况下,它更像是默认的a是父类..而其他所有子类都是它的子类并覆盖它的默认行为.
更新 – 对评论的回应：
信誉良好的网站参数：
这些举措几乎总是由社区推动,然后被信誉良好的公司所采用……即使它们被大公司采用,它通常也是自下而上的,通过热心的开发商来倡导这种变革.我一个人就是这样的倡导者.我在亚马逊工作.即使它被采用……它通常是小规模的,而不是组织中的所有单位.对谷歌和亚马逊以及脸谱等执行这样的规则甚至不是一个好主意b / c总会有不同的意见..更不用说这种微观管理会限制工程师的创造力.在一个团队的维基中可能有一个指南(即我们有一个用于亚马逊Kindle Touch应用程序商店)但是要在整个公司内工作的10,000名工程师执行该规则是不实际也不可取的.
所以简而言之,如果你看到OOCSS的价值,并开始在你的网站上实施,并向你的网络开发者提倡,然后它成为一种趋势,那就是它最终成为行业范围的最佳实践,那时你可以期待在Facebook等上看到它
例：
看看这个：
简单：http://jsfiddle.net/64sBg/
更详细一点：http://jsfiddle.net/64sBg/2/
没有太多细节(我相信你会看到模式)你可以看到css描述中的粒度允许细微的更改,而没有样式定义中的任何冗余.因此请注意左箭头与右箭头..也可以将.red和.blue样式随后应用于表等.
还注意到我的css中没有单个级联..所以我的样式可以完全独立应用(即实现规则无论你把它放在哪里,对象应该看起来都一样)
最后..仍然有用于级联..你绝对可以在你的jQuery选择器中使用它例如..默认情况下也会发生级联(即你不必在你的css样式中明确设置它)..所以如果你看看在下面的CSS ..你会注意到body的字体属性已经级联到所有按钮.
<a class="button blue dark">
<div class=" arrowDownWhite rightArrow">Analytics</div>
</a>
<a class="button red dark">
<div class=" arrowDownWhite leftArrow">Actions</div>
</a>
<a class="button grey light">
<div class=" arrowDownRed leftArrow">options</div>
</a>
和css：
body
{
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 15pt;
}
.button
{
padding: .5em 1em;
display: inline-block;
text-decoration: none;
}
.dark {
color: white;
}
.light{
color: #E40E62;
}
.blue
{
background-color: #51C8E8;
}
.red
{
background-color: #E40E62;
}
.grey
{
background-color: #E0E0E0 ;
}
.arrowDownWhite
{
background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png);
background-repeat:no-repeat;
}
.arrowDownRed
{
background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
background-repeat:no-repeat;
}
.leftArrow
{
padding-left: 1em;
background-position: left center;
}
.rightArrow
{
padding-right: 1em;
background-position: right center;
}