css - OOCSS容器和内容的分离？

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

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

引用https://github.com/stubbornella/oocss/wiki

本质上，这意味着“很少使用与位置相关的样式”。无论放置在何处，对象都应该看起来相同。因此，不要使用.myObject h2 {...}为特定的h2设置样式，而是创建并应用一个描述相关h2的类，例如h2 class =“ category”。

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

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

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

.inverted{ color: #FFF; }

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

为Cascade制作样式不是整个语言的目的吗？
我在这里误会什么吗？

最佳答案

我认为您是对的，在您的特定示例中，是的。也许按照您的方式进行会更容易。但是再说一次，如果您查看OOCSS page:中的第一句话

您如何缩放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按钮（网站上的任何地方，不仅有页脚，这是OOCSS的重点）内的链接都应该是红色的。那么这就是OOCSS的方法：

.redLink {
 color: red;
}

和HTML将是

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

在这种情况下，是否取出.lightGrey类无关紧要，或者我们可以在脚注内或不在脚注内使用此代码..都是一样的..它导致更可预测和可重复使用的代码..是OOCSS（我很高兴他们终于将其正式化了。非常感谢btw的帖子）。

最后一点：作为纯OOCSS，不应更改a的默认颜色，即a {color: #000;}是错误的！，应将其保留为默认颜色（蓝色）。颜色..那么他们必须指定它，即

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

因此，在这种情况下，它更像是默认的a是父类。其他所有子类都将其子类化并覆盖其默认行为。

更新-对评论的回应：

信誉良好的网站参数：

此类倡议几乎总是由社区推动，然后由知名公司采用。.即使是大型公司采用，它们也通常是自下而上通过热心的开发商倡导这种变革。我在亚马逊工作。甚至在采用它的时候..它通常规模很小，并且不在组织的所有部门中使用。对于谷歌，亚马逊和facebook等实施这样的规则甚至不是一个好主意，总会有意见分歧。更不用说这种微观管理会限制工程师的创造力。在团队的Wiki中可能有一个准则（即我们在Amazon Kindle Touch应用商店中有一个准则），但是要在公司中的10,000名工程师中实施该规则既不切实际，也不可取。

因此，简而言之，如果您看到OOCSS的价值，并开始在您的网站上实施，并向其他Web开发人员宣传，那么它就成为一种趋势，那就是它最终成为行业最佳实践，并且您可以期望在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;
}

关于css - OOCSS容器和内容的分离？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15043976/