BEM html命名约定

Question

在过去的几天里，我一直在尝试与BEM合作，但对于如何进行命名约定感到困惑。

据我所知，您可以命名一个块，然后根据需要添加带有双下划线的元素。但有时这很难理解。

让我们以这个为例。

<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

来源：https://en.bem.info/methodology/quick-start/

让我们假设，我已经有几个按钮按照BEM命名约定进行编码。有点像

<button class="btn btn--secondary">Search</button>

问题:如果我将表单中的搜索-表单__按钮替换为第二个代码btn -btn-，这不意味着我违反了规则吗？

第二，有谁能帮我用BEM会议来命名下面这个区块吗？

<div class="profile-card">
    <div class="profile-card-header"></div>
    <div class="profile-pic"><img src="images/headshot.JPG"> </div>
    <div class="content">
        <div class="main"> <a class="header">Donald Trump</a>
            <div class="meta">President, USA</div>
            <div class="location">Somehwere in USA</div>
        </div>
        <p>I am the President of US of A and its huge</p>
    </div>
    <div class="footer">
        <div class="btn-group" role="group" aria-label="...">
         <button class="btn">hi</button>
    </div>
    </div>
</div>

我不是在为第二个街区设置代码，但相信我，我试过了，每次都是意大利面，更令人困惑和荒谬的是，我最终把所有的东西都删除了。如果你能帮忙，我会很感激

Answer 1

你没有违反规则，如果你嵌套边界元块，这是什么意思，但你必须小心地做。

最好的解决方案是创建一个元素来欢迎一个子块，我喜欢把它称为“巢”。这个巢应该处理位置，边距和对齐。因此，您不必修改您的子块(btn)来处理新的上下文。

<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block, called nest -->
    <div class="search-form__button>

        <!-- new button block -->
        <button class="btn btn--secondary">Search</button>
    </div>
</form>

对于你的第二个问题，下面是我的猜测：

<div class="profile-card">
    <div class="profile-card__header"></div>
    <div class="profile-card__pic">
      <img src="images/headshot.JPG">
    </div>
    <div class="profile-card__content">
        <div class="profile-card__main">
            <a class="profile-card__name">Donald Trump</a>
            <div class="profile-card__role">President, USA</div>
            <div class="profile-card__location">Somehwere in USA</div>
        </div>
        <p>I am the President of US of A and its huge</p>
    </div>
    <div class="profile-card__footer">
        <div class="btn-group" role="group" aria-label="...">
            <button class="btn">hi</button>
        </div>
    </div>
</div>

您可以看到，profile-card__footer成为子块的巢(.btn-group)。