OOCSS容器和内容的分离？

问题：第二个OOCSS原则真的有效吗

根据OOCSS第二个原则，您不应该拥有位置相关的样式：

引自

本质上，这意味着“很少使用位置相关样式”。无论你把一个物体放在哪里，它看起来都应该是一样的。因此，不要使用.myObject h2{…}设置特定h2的样式，而是创建并应用一个描述所讨论的h2的类，如h2 class=“category”

让我们举一个实际的例子。假设我有一个标准的2.0设置，有一个正常的主体（白色背景）和一个巨大的页脚（黑色背景）。在正文中我们有黑色链接，在页脚中我们当然需要白色链接。实现这一目标的最简单、最直观的方法不是：

a{ color: #000; }
.footer a{ color: #FFF; }

如果我想遵循OOCSS原则，我必须首先创建一个类：

.inverted{ color: #FFF; }

然后继续将该类添加到我想要的每个链接中。这看起来很麻烦

整个语言的目的不是让风格层叠吗？

---

我在这里误解了什么吗？

我认为你是对的，是的，在你的具体例子中。。也许用你的方式做会更容易。但话说回来，如果你看第一句话

如何为数千页扩展CSS

在这种情况下。。第二条原则很有道理。。因此，使用相同的示例（即假设我们实现了您的解决方案）。。假设一年后，您的公司决定在黑色页脚中创建浅灰色按钮，并显示黑色文本：

<!-- inside footer -->
<a class="button lightGrey">link</a>

其中，似乎我们只是做出了一个决定，所有

a

标签默认为黑色（见最后一条注释）：

然后在页脚中，我们将创建一种特殊类型的链接，该链接应为白色：

.footerLinks { color: #FFF }

一年后，一些链接仍然是白色的。。灰色灯光按钮内的其他按钮将为黑色：

<a class="button lightGrey">link</a>

而html将是

<a class="button lightGrey redLink">link</a>

因此，在本例中，它更像默认的

a

是父类。。其他一切都将其子类化并覆盖其默认行为

更新-回复评论：

信誉良好的网站论点：

这些举措几乎总是由社区推动，然后被信誉良好的公司采纳。。而且，即使它们被大公司采用，通常也会通过鼓吹这种变革的热情开发人员自下而上地进行。。我在亚马逊工作的时候就是这样一个倡导者。即使它被采纳了。。它通常是在一个小规模，而不是在组织中的所有单位。对于谷歌、亚马逊和facebook等公司来说，执行这样一条规则都不是一个好主意。当然，意见总是会有分歧的。。更不用说这种微观管理会限制工程师的创造力。。wiki中可能会有一个团队指南（比如我们为亚马逊Kindle Touch应用商店提供了一个指南），但在整个公司的10000名工程师中实施这一规则既不实际也不可取

简而言之，如果你看到OOCSS的价值，开始在你的网站上实施，并向你的网络开发伙伴宣传它，然后它成为一种趋势，那就是它最终成为全行业最佳实践的时候，也就是你可以期望在facebook上看到它的时候

例如：

看看这个：
简单：
更详细一点：

不需要太多细节（我相信您会看到模式），您可以看到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>

---

把你的皮肤从容器中分离出来是值得的

让我们超越色彩。我希望妮可·沙利文能提供比她更好的例子。我有23个网站，其中包含

• 菜单
• 标签
• 工具栏
• 链接的水平和垂直列表

它们都是导航抽象的皮肤 我首先创建了一个抽象类来处理它们之间的公共代码。我添加了一些修改器来将方向从水平更改为垂直，以及它的浮动位置。我把所有的颜色都排除在抽象之外，以及css规则，这些规则可以根据我应用于它的皮肤而改变

/* Object */

.nav
{
    margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
    /* Modifier */

    .nav--stack .nav__item
    {
        display: block;
    }

    .nav--right
    {
        float: right;
    }

    /* Elements */

    .nav__item
    {
        float:left
    }

        .nav__item__link
        {
            display:none;
         }

菜单皮肤 我需要一个使.nav抽象看起来像边栏菜单的皮肤。如果你想知道的话，我没有在上面添加.nav_item_链接的填充，因为它可以根据皮肤进行更改。标签皮肤设置为2px

/* Object */

.menu
{

}

/* Elements */

    .menu .nav__item--current.nav__item__link
    {
        color: #fff; background: blue;
    }

    .menu .nav__item__link
    {
        padding: 4px; border-radius: 4px;
    }

    .menu .nav__item__link:hover
    {
        background: #eee
    }

注意保持事物位置独立-我有0个标记名。我不喜欢li和孩子们的风格，就像bootstrap一样。这段代码可以在dls甚至DIV上使用，并且根据选择器引擎读取规则的方式具有更好的性能

---

对我来说，只需对我所有23个站点的对象进行蒙皮，这一好处值得任何麻烦。

感谢您的回复。我能理解你关于原则2的优点的观点。不过有两点：我找不到一个声誉良好的网站大规模实施了这一原则，不是facebook，不是谷歌，甚至没有一个单独的列表。现在我不是想从权威的角度来论证，我只是想指出，这似乎不是一个经历过规模的想法，所以我们没有

<a class="redLink">..</a>

<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>

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;  
}

/* Object */

.nav
{
    margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
    /* Modifier */

    .nav--stack .nav__item
    {
        display: block;
    }

    .nav--right
    {
        float: right;
    }

    /* Elements */

    .nav__item
    {
        float:left
    }

        .nav__item__link
        {
            display:none;
         }

/* Object */

.menu
{

}

/* Elements */

    .menu .nav__item--current.nav__item__link
    {
        color: #fff; background: blue;
    }

    .menu .nav__item__link
    {
        padding: 4px; border-radius: 4px;
    }

    .menu .nav__item__link:hover
    {
        background: #eee
    }