Стоит ли делать несколько инлайновых элементов на одном уровне, следуя БЭМ?

Question

[Anonymous Penguin]

Можно ли делать несколько инлайновых элементов на одном уровне по БЭМ, или их стоит обернуть в блочные? Пример:

Инлайновые на одном уровне
<form class="form">
    <input class="form__input" type="text">
    <input class="form__input" type="email">
    <input class="form__input" type="password">
</form>

...или...

Каждый инлайн обернут в свой блок
<form class="form">
    <div class="form__item">
        <input type="text" class="form__input">
    </div>
    <div class="form__item">
        <input type="email" class="form__input">
    </div>
    <div class="form__item">
        <input type="password" class="form__input">
    </div>    
</form>

И да, если второй, то как лучше давать классы?

Comments

[Ankhena]

Тут дело не в БЭМ, а в доступности и семантике.
И соображений несколько:
Для доступности у инпутов должны быть label. Если их нет в макете, то они должны быть доступно скрыты с помощью паттерна visually-hidden (гуглится).
Если идет несколько подряд инпутов, то вероятно, это список.
В итоге получаем список, каждый элемент которого input + label = красивая, доступная структура. К тому же помогает стилизации.

Answer 1

[iBird Rose]

второй вариант

И да, если второй, то как лучше давать классы?

так как внутри этого блока могут быть и другие элементы формы, а не только input. А также они могут быть использованы во многих местах сайта, то лучше выделить его как отдельный блок. т.е. к примеру .form-item

Comments

[Anonymous Penguin]

Спасибо большое ;D