4

问题：第二个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制作样式吗？我在这里误解了什么吗？

4

2 回答 2

7

我认为你是对的，是的，在你的具体例子中......也许按照你的方式做会更容易。但是话又说回来，如果您查看OOCSS 页面中的第一句话：

你如何为数千个页面扩展 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 }

然后一年后，一些链接仍然是白色的.. grayLight 按钮内的其他链接将是黑色的：

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

那么在这里我们不必担心撤消任何事情..a标签有一个默认颜色..就是这样。如果 2 年后有人决定 lightGrey 按钮内的链接（网站上的任何地方，不仅是页脚......这是 OOCSS 的重点）应该是红色的......那么这将是 OOCSS 方法：

.redLink {
 color: red;
}

并且 html 将是

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

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

最后一点：要成为纯 OOCSS，不应该更改aie的默认颜色a {color: #000;}是错误的！，它应该保留它的默认颜色（蓝色）..每当有人想要更改该颜色..然后他们必须指定它，即

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

所以在这种情况下，它更像是默认值a是父类.. 其他一切都是它的子类并覆盖它的默认行为..

更新 - 对评论的回应：

信誉良好的网站论点：

此类举措几乎总是由社区推动，然后由知名公司采用。即使它们被大公司采用，它通常也是自下而上通过倡导这种变革的热心开发人员进行的。我就是这样的倡导者，当我在亚马逊工作。即使它被采用......它通常是小规模的，而不是组织中的所有单位。对于谷歌、亚马逊和 Facebook 等来说，执行这样的规则甚至不是一个好主意，b/c 总会有不同的意见。更不用说这种微观管理会限制工程师的创造力。 wiki 中可能有一个团队指南（即我们有一个用于 Amazon 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;  
}
于 2013-02-23T19:01:58.680 回答
0

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

让我们超越颜色。我希望妮可沙利文提供比她更好的例子。我有 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 个标签名称。我不像 bootstrap 那样在 .nav 上设置 li 和一个孩子的样式。此代码可用于 dls 甚至 div，并且基于选择器引擎读取规则的方式具有更好的性能。

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

于 2013-04-09T15:29:19.387 回答