边界元模型？块内块？

Question

有点不确定何时在 BEM 中启动新上下文。

所有子元素都应该始终引用块元素吗？

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__search">
                <!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
            </div>
        </div>
    </body>
</html>

这里的搜索是在 'header' div 中，但是我们真的应该将它附加到页眉吗，因为它可以在网站的其他地方使用？

你有新的块内块吗？

干杯

Answer 1

据我了解，块重叠没有任何问题，只要用于定位每个块的 css 谨慎且独立即可。因此，如果 search 样式在其他地方可用，则不应依赖于 header 样式。同样，header 样式一旦与其子项失去相关性，就不需要进一步向下。

这样的东西行得通吗？这有意义吗？

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__right">
                <div class="search">
                    <input class="search__input>
                    <button class="search__button>GO!</button>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 2

search__button 元素缺少结束引号，但堆栈溢出的编辑条件非常严格，我不允许编辑它。

边界元模型？块内块？

BEM? Blocks inside blocks?

css

bem