时间戳

首页 > 解决方案 > BEM html 命名约定

html - BEM html 命名约定

问题描述

过去几天我一直在尝试使用 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>

问题：如果我将表单中的 search-form__button 替换为第二个代码 btn btn--secondary 是否意味着我违反了规则？

其次，有人可以帮我在下面使用 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>

我没有为我寻求帮助的第二个区块提供代码，但相信我，我已经尝试过，每次它最终都变成了意大利面条，更令人困惑，更荒谬的是，我最终删除了所有内容。如果您能提供帮助将不胜感激

标签： htmlnaming-conventionsbem

解决方案

如果你嵌套 BEM 块，你并没有违反规则，这就是它的意思，但你必须小心翼翼地去做。

最好的解决方案是创建一个欢迎子块的元素，我喜欢称它为“巢”。这个嵌套应该处理位置、边距和对齐。因此，您不必修改子块 ( 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) 的嵌套。

推荐阅读