SMACSS,BEM和OOCSS不是便携式的吗？

Question

所以我对OOCSS有疑问.它应该更便携,但与我通常做的事情相比,我发现它不那么容易.

我的例子:

我有一个小部件见证.在主要内容正文(具有白色背景)中,证词具有黑色字体.但是在页脚(具有蓝色背景)中,证词需要白色字体.

在OOCSS之前,我会做这样的事情:

#main-content .testominial {
  color: #000000;
}
#footer .testominial {
  color: #FFFFFF;
}

使用这种"旧"方法,我可以将我的小部件从内容区域拖到页脚,颜色可以简单地工作 - 我不需要更改我的小部件的CSS或DOM类.

使用新的OOCSS/BEM,我不应该将.testimonial类耦合到ID(或位置),而是我应该像这样继承它:

.testominial {
  color: #000000;
}
.testominial--footer {
  color: #FFFFFF;
}

这样做的问题是,我不能再将我的推荐从内容区域拖到页脚而不进入DOM并更改推荐小部件上的类 - 它是轻便的,因为它需要开发人员的手动干预; 而在编辑器可以拖动它之前,样式是自动的.

我错过了什么吗？似乎没有可靠的现实世界的例子吗？

Answer 1

您需要考虑删除testimonial命名以及footer.

考虑这个例子:

.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }

在示例中,类完全独立于其页面上下文.结果是类完全可以重用.页面上的任何框都可以使用上面的类,并期望完全按照定义设置样式.

例如,您可以:

<header>
    <div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
    <p class='primary-box primary-box--standout'></p>
</div>
<footer>
    <div class='primary-box primary-box--reduced'></div>
</footer>

现在,当设计师回来并调整突出框的填充时,您可以直接进入这些样式并进行调整,确信唯一受影响的区域将是HTML中包含这些类的区域.

此外,当您决定.primary-box--reduced从<header>位于其上方的菜单栏或页脚中移动时,您可以确信样式将完全出现.

当你需要某个地方的另一个元素,可能是一个primary-box--standout,或者只是primary-box标题中的默认元素时,你只需创建它并添加类,它们的样式将完全遵循.

你也永远不会继承意想不到的风格.

这是一个真实世界的例子,我最近建造的网站几乎都是这样构建的,我说几乎都是因为我还在学习,但我能保证在快速移动的项目中我遇到的麻烦最少具有非常流畅的设计是具有非特定背景的设计.

重要的是缺乏背景.在第一个示例中,.testimonial--footer非常依赖于上下文,您只需要在页脚中的推荐书中使用它.

并仿佛通过魔术CSS Wizardry涵盖了这个确切的主题

编辑:我添加了这个例子,以帮助我的答案评论.这不是BEM或OOCSS,尽管它更接近SMACSS方法.这就是我解决css问题的方法,是一种混合的BEM/SMACSS方法:

按顺序加载:

• 模块文件,例如 .primary-box
• 页面部分文件,例如.header或.call-to-action
• 页面文件,例如.about-us或.contact

每个文件都越来越具体,同时构建更复杂的模块.基于上面的示例并希望帮助OP,您可以看到以下样式:

.header {
  .primary-box {
    color: #000;
  }
}

这将使用更具体的嵌套类表示法覆盖模块样式.请注意,我仍然会避免使用类名称.header- .banner-standout会更好,因为它可以在任何地方重复使用而不会产生混淆

接下来,您甚至可以看到:

.about-us {
  .header {
    .primary-box {
      color: #f00;
    }
  }
}

我发现这在上下文的实际项目中非常有效,同时保留了BEM的上下文自由功能,尽管我也会尽可能地推动这个链进入模块.如果我识别新的通用页面部分或模块并适当地重新组织命名和文件,生活会更容易.在一个小心重构代码的项目中,我在页面文件中没有任何内容.