Как правильно назвать классы по БЭМ'у?

Question

[svk44]

В макете есть много элементов, но для примера: два вида инпутов (длинные и короткие).
У каждого вида есть обычное отображение, отображение при неверном заполнении и при фокусе. Как их правильно назвать по БЭМ'у?

Comments

[Сергей delphinpro]

Длинные и короткие – это единственное отличие?

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

[svk44]

Сергей delphinpro,
да, единственное отличие. только в макете они отдельно указаны. исходя из вашего ответа, мне не стоит указывать ширину блока, а в момент использования компонента обернуть его в див(с этой заданной шириной)?
и подскажите, пожалуйста,
блок я именую input-field;
элементы внутри блока: input-field__label и input-field__input, соответственно;
модификаторы: input-field__label_error, input-field__input_error и input-field__label_focused input-field__input_focused, соответственно,
такие именования и структура верно реализована?

[Сергей delphinpro]

svk44, да. верно.
Только модификатор допускается вешать на весь блок.
И состояния - это не булевый модификатор, и рекомендуется использовать в виде _параметр_значение

.input-field_state_error .input-field__label {}
.input-field_state_error .input-field__input {}
.input-field_state_focus .input-field__label {}
.input-field_state_focus .input-field__input {}

Answer 1

[Dimka59]

почитайте документацию https://ru.bem.info/ и все станет понятно
если читать не охото можно на ютубе видео найти

Comments

[svk44]

Dimka59, вроде бы понял.
подскажите, пожалуйста,
блок я именую input-field;
элементы внутри блока: input-field__label и input-field__input, соответственно;
модификаторы: input-field__label_error, input-field__input_error и input-field__label_focused input-field__input_focused, соответственно,
такие именования и структура верно реализована?