Соглашение о присвоении имен в HTML - PullRequest
Новая
       47

Соглашение о присвоении имен в HTML

0 голосов
/ 17 апреля 2019

Я пытался поработать с БЭМ в течение последних нескольких дней, но не понимаю, как действовать в соответствии с соглашением об именах.

Я понимаю, что вы называете блок, а затем добавляете элементы по мере необходимостидвойное подчеркивание.Но иногда это вряд ли имеет смысл.

Давайте возьмем это в качестве примера. 

<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/

Предположим, у меня уже есть несколько закодированных кнопокв соответствии с соглашением об именах БЭМ.Что-то вроде 

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

Вопрос: Если я заменю кнопку search-form__ в форме вторым кодом btn btn - вторичный, это не будет означать, что я нарушил правила?

Во-вторых, может кто-нибудь помочь мне с наименованием этого блока ниже, используя соглашение БЭМ 

<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>

Я не выставляю коды для второго блока, для которого я прошу помощи, но поверьте мне, что у меня естьпытался, и каждый раз это оказывалось спагетти, более запутанным и настолько нелепым, что я заканчивал тем, что удалял все.Буду благодарен, если вы можете помочь

1 Ответ

3 голосов
/ 18 апреля 2019

Вы не нарушаете правила, если вкладываете блоки БЭМ, это то, что значит быть, но вы должны делать это осторожно.

Лучшее решение - создать элемент, который будет приветствовать дочерний блок, мне нравится называть его "гнездом". Это гнездо должно обрабатывать положение, поля и выравнивание. Поэтому вам не нужно изменять ваш дочерний блок (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).

...