7

我一直在一个项目中使用 BEM 来保持我的 CSS 更加模块化，并且遇到了一些我觉得需要澄清一下的情况：

上下文相关的样式。我不断遇到需要根据父项上的类更改模块/组件的样式。

假设我正在设计产品列表。我有我的.product-list组件，里面有我所有.product-list__item的。然后.product-list__item's 可能有一个<h3>inside 作为产品标题。

我的问题是：

  • 也应该.product-list__item有一个类.item？

  • 产品内的标题是否应具有以下类别：

    • .item__title?
    • .product-list__item__title?

假设该商品内部还有一个描述框，其中包含价格：

  • 描述应该有：
    • .item__description?
    • .product-list__item__description?

  • 价格应该有：

    • .item__description__price?
    • .description__price?
    • .price?

我做子组件有点需要单独添加自己的组件名称，即：.item或.description。我猜他们需要它们，因为他们在哪里可以应用他们的样式？

另外，如果我有上述内容，我将拥有一个.product-list听起来不错的组件，但是如果子组件将它们自己的组件名称添加为一个类，.item那么它本身就不是很具有描述性，是吗？

我知道它们可能听起来很复杂，但我很想在这里感到困惑，并且很想听听您的意见。我已经阅读了大量关于 BEM 的文章，但没有一篇解释过这类事情。

尼尔

4

1 回答 1

9

根据 BEM 方法，没有元素的元素，因此product-list__item__title您应该使用product-list__item-title.

至于上下文相关的样式，您可以使用级联（并将样式放置到父文件）或像您的示例中那样混合。规则很简单：一旦你发现自己在没有父块的地方使用了某个项目——将其设为单独的块并使用混合，但如果项目在没有父块的情况下绝对无用，则使用级联更有意义。

于 2013-10-27T02:54:38.740 回答