block__element__element和BEM中的block__element-element有什么区别

Question

例如：

<div class="menu">
    <div class="menu__item">
        <div class="menu__item-title">
        </div>
    </div>
</div>

有一些像menu__title这样的解决方案。

但是如果菜单有自己的标题，那么如何识别菜单的标题和菜单项的标题呢？

Answer 1

主要区别在于block__element__element不是有效的边界元选择器。您在问题中显示的标记是命名元素的正确方式。

创建数据块

如果一段代码可以被重用，并且它不依赖于正在实现的其他页面组件。

创建元素

如果没有父实体(块)，一段代码就不能单独使用。

例外的是，为了简化开发，必须将元素划分为更小的部分-子元素。在BEM方法中，您不能创建元素的元素。在这种情况下，您需要创建服务块，而不是创建元素。

官方文档中有更多信息：https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element

如果想要菜单标题，则标记应如下所示：

<div class="menu">
    <h2 class="menu__title">..</h2>
    <div class="menu__item">
        <div class="menu__item-title">
        </div>
    </div>
</div>

当你有一个元素的“子元素”时，BEM会变得有点棘手。但是，要么使用块命名约定，要么重新考虑您的元素，也许可以将其分离并作为块重用