小编gjo*_*jok的帖子

所以我对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并更改推荐小部件上的类 - 它是轻便的,因为它需要开发人员的手动干预; 而在编辑器可以拖动它之前,样式是自动的.

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

我不确定命名我的 BEM 块的最佳方法，因为它们需要包装器。例如，给定以下标记：

<div class="products-list">

  <div class="product__item">
    <div class="product__item__title">Product 1</div>
    <img class="product__item__image" />
  </div>

  <div class="product__item">
    <div class="product__item__title">Product 2</div>
    <img class="product__item__image" />
  </div>

</div>

我觉得顶部包装器（产品列表）有点丢失。

使用类似的东西显然太深了：

products-list__product__item__image

那么，我们如何处理 BEM中的包装器，其中子元素也是包装器？