所有这些都是导航抽象的皮肤

Question

问题：第二个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 的样式不是整个语言的目的吗？我在这里误解了什么吗？

Answer 1

我认为你是对的，在你的具体例子中，是的。或许以你的方式做事会更容易。但话又说回来，如果你看一下OOCSS page:

中的第一句话

如何扩展数千页的CSS？

在这种情况下......第二个原则是完全合理的......所以使用相同的例子（即假设我们实施了你的解决方案）..让我们说，你公司决定在未来一年内制作浅灰色按钮。黑色页脚有黑色文字：

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

在这种情况下..所有a标记都是白色的，因为它们已被级联覆盖。因此，我们将不得不创建另一个sytle，以撤消您的解决方案所做的事情：

.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是父类..而且其他一切都是它的子类并覆盖它的默认行为..

更新 - 对评论的回复：

信誉良好的网站参数：

这些举措几乎总是由社区推动，然后被信誉良好的公司所采用......即使它们被大公司采用，通常也会自下而上通过热心的开发商提倡这种变革。我就是这样的我在亚马逊工作时的倡导者。即使它被采用......它通常是小规模的，而不是组织中的所有单位。对谷歌和亚马逊以及脸谱等执行这样的规则甚至不是一个好主意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;  
}

Answer 2

将皮肤与容器分开是件值得的。

让我们超越色彩。我希望Nicole Sullivan能提供比她更好的例子。我有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_ 项 _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喜欢bootstrap。此代码可以在dls甚至div上使用，并且基于选择器引擎如何读取规则具有更好的性能。

对我来说，只需要为我拥有的所有23个站点设置物体，这样做的好处值得一试。

OOCSS容器和内容的分离？

2 个答案:

所有这些都是导航抽象的皮肤

菜单外观