BEM与命名元素混淆

Question

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

依赖于上下文的样式。我一直想要改变依赖于父项的类的模块/组件的样式。

说我是产品列表的样式。我有.product-list组件，里面有我.product-list__item的所有组件。然后，.product-list__item的内部可能会有<h3>作为产品标题。

我的问题是：

• .product-list__item是否还有一类.item？

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

• • .item__title？
• • .product-list__item__title？

假设该项目中还有一个描述框，其中包含价格：

• 描述是否应该：
• • .item__description？
• • .product-list__item__description？

• 价格是否应该：

• • .item__description__price？
• • .description__price？
• • .price？

我做子组件需要添加separatley自己的组件名称，即：.item或.description。我猜他们需要它们，以及它们应用其样式的其他地方吗？

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

我知道这可能听起来很复杂，但我很认真地在这里感到困惑，并且很想听听你的意见。我读了很多关于BEM的文章而没有人解释过这类事情。

尼尔

Answer 1

根据BEM方法，没有元素元素，因此您应使用product-list__item__title代替product-list__item-title。

对于依赖于上下文的样式，您可以使用级联（并将样式放置到父文件）或混合，如示例中所示。规则很简单：只要你发现自己在没有父块的地方使用某些项 - 让它单独阻止并使用混合但是如果没有父级使用级联的项目​​绝对无用更有意义。