Стоит ли указывать такой класс в разметке для читабельности?

Question

[Иван]

я создал кнопку, она является элементом блока главного хедера. далее я создаю укороченное название, после чего создаю модификатор который больше для читабельности самой разметки, чем я буду это использовать в стилизации. Вопрос, есть ли смысл указывать что на десктопах кнопка скрыта, а при уменьшении до таблеток или телефонов появляется? Просто написать что btn-burger--hidden не совсем корректно т.к он скрыт только для больших экранов.

<button type="button" class="main-header__btn-hamburger btn-hamburger btn-hamburger--desktop-hidden">

Comments

[FeST1VaL]

Я бы не писал вообще btn... никому не нужное сокращение... чисто мое мнение и как бы я написал, то так:

main-header__button hamburger hamburger--desktop

[Иван]

Артем Будин, у меня эта кнопка в хедере не единственная, поэтому мне кажется это main-header__button будет не так удобно, а так же кнопка ведь скрывается на десктопах, а тут не понятно, что обозначает это hamburger--desktop, или я неправильно мыслю?

[FeST1VaL]

BenderIsGreat34, ну если честно не сказать бы что не правильно, просто не вижу смысла писать hidden. Я указываю модификатор, а что в нем уже пофиг)

Answer 1

[Seniorxor]

Просто написать что btn-burger--hidden не совсем корректно т.к он скрыт только для больших экранов.

Если я правильно понял постановку вопроса, то по уму hidden это модификатор блока, а не его элемент как у вас. Т.к он описывает состояние и поведение блока, а не является его неотъемлемой частью.
Поэтому корректно будет написать так : btn-burger_hidden. Есть основной блок btn-burger его поведение на различных разрешениях описывает модификатор _hidden. Поэтому к стилизуемому блоку пишем класс .btn-burger, а где его надо скрыть, допустим в media запросе для широких экранов добавляем класс модификатора _hidden. Например :

<button type="button" class=" btn-burger btn-burger_hidden ">.

Вообще можете конечно писать и именовать классы как угодно, но БЭМ это соглашения для улучшения взаимопонимания между разработчиками поэтому btn-burger--hidden мне лично говорит только что это какой-то скрытый блок. А вот написание btn-burger_hidden мне скажет что эти свойства заставляют блок скрыться при данных обстоятельствах.

Comments

[Иван]

а в чём разница этого btn-burger--hidden и вот этого btn-burger_hidden?
вы просто дважды разным синтаксисом описали модификатор, лично я, увидев ваш вариант, не понял бы что

эти свойства заставляют блок скрыться при данных обстоятельствах