OOCSS容器和内容分离？

Question

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

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

来自https://github.com/stubbornella/oocss/wiki的报价

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

让我们以一个实际的例子为例。假设我有一个标准2.0设置，有一个正常的身体(白色背景)和一个巨大的页脚(黑色背景)。在身体上，我们有黑色的链接，而在页脚，我们当然需要白色。不是实现这一点的最简单和最直观的方法：

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

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

.inverted{ color: #FFF; }

然后继续将这个类添加到我想要倒转的每个链接中。这似乎是个麻烦。

难道不是整个语言的目的，风格是制作的级联？我是不是误会了什么？

Answer 1

我认为你是对的，在你的具体例子中。也许按你自己的方式做会更容易。但是，再一次，如果您查看支助厅网页：中的第一句

如何对数千页的CSS进行缩放？

在这方面..。第二个原则是完全合理的。因此，使用相同的示例(即假设我们实现了解决方案)。假设一年后，您的公司决定在具有黑色文本的黑色页脚上创建亮灰色按钮：

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

在这种情况下..。所有的a标签都将是白色的，因为它们被你的级联所覆盖。因此，我们将不得不创建另一个系统来撤销您的解决方案：

.footer a.button.lightGrey {
   color: #000;  /* huh? but i thought we did this before with a {color: #000;} ?*/
}

似乎我们只是简单地决定了默认情况下所有的a标记都是黑色的(参见最后一个注释)：

a{ color: #000; }

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

.footerLinks { color: #FFF }

一年后，一些链接仍然是白色的。greyLight按钮中的其他内容将是黑色的：

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

那我们就不用担心会毁掉任何事..。a标签的颜色是默认的。仅此而已。如果2年后有人决定lightGrey按钮内的链接(站点上的任何地方)，而不仅仅是页脚。这是中央支助厅的全部要点)应该是红色的。那么，这就是中央支助厅的做法：

.redLink {
 color: red;
}

而html将是

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

在这种情况下，如果我们去掉.lightGrey类，或者我们可以在页脚内或不在页脚内有这段代码，那就不重要了。一切都一样..。它会产生更可预测和可重用的代码..。那就是OOCSS (我很高兴他们终于把这个正式化了。)非常感谢这篇文章。

最后一个注意事项：要纯OOCSS，不应该改变a的默认颜色-- a {color: #000;}是错了！，它应该留给它的默认颜色(蓝色)。只要有人想改变颜色..。那么他们必须指定它

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

因此，在这种情况下，更像是默认的a是父类。其他所有的东西都会子类并重写它的默认行为。

更新-对评论的响应：

有信誉的站点论点：

这类举措几乎总是由社区推动，然后被信誉良好的公司所采用。即使它们被大公司采用，通常也是从下到上，通过热情的开发人员来倡导这种变革。在亚马逊工作的时候，我就是这样一个倡导者。即使它被收养了..。它通常是在一个小规模，而不是在组织中的所有单位。对谷歌、亚马逊、笔记本等公司来说，执行这样一条规则甚至都不是一个好主意，b/c总是有不同的意见。更不用说这种微观管理会限制工程师的创造力。wiki中可能有一个团队指南(比如亚马逊Kindle应用商店)，但在公司内工作的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;  
}

Answer 2

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

让我们看看颜色以外的东西。我希望Nicole Sullivan提供比她更好的例子。我有23个网站

• 菜单
• 选项卡
• 工具栏
• 横向和纵向链接列表

他们都是Nav抽象派的表演者

我首先创建了一个抽象类来处理它们之间的公共代码。我添加了几个修饰符，将方向从水平改变到垂直，还增加了浮动位置。我将所有颜色排除在抽象和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_link填充是因为它可以根据皮肤变化。标签皮肤设置为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标记名。我不喜欢.nav上的李和孩子们的风格，就像引导程序一样。此代码可用于dls或甚至div，并且基于选择器引擎读取规则的方式具有更好的性能。

对我来说，只要把我所有23个网站的所有物品都剥去，就有好处了，这是值得的。