Здравствуйте. Использую бэм уже продолжительное время, но до сих пор иногда оказываюсь просто в растерянности в некоторых ситуациях Есть 2 кейса:
1. Первый кейс. У нас есть блок .contacts, который используется в header, footer и на странице контакты
.contacts
.contacts__item
.contacts__link
Во всех 3-х случаях его элементы выглядят и позиционируются немного по разному. Для позиционирования я делаю микс
.contacts.header__contacts
.contacts__item
.contacts__link
Но встает вопрос, как стилизовать элементы:
Давать миксы header__item
и header__link
не вариант, т.к. в хэдере могут уже существовать эти классы вне контекста .contacts
1) Можно создать еще один пустой микс класс
.contacts.header__contacts.header-contacts
.contacts__item.header-contacts__item
.contacts__link.header-contacts__link
Раньше я поступал именно так. Но мне все больше не нравится такой подход. Во-первых сам класс выглядит так будто пытается выдать себя за два. Во-вторых мы создаем новый блок просто ради того, чтобы задать косметические изменения, что как мне кажется не верно.
2) Можно делать кучу модификаторов для каждого элемента в отдельности, но тогда страшно представить сколько в проекте будет модификаторов, большинство из которых будет использоваться только 1 раз.
3) Можно сделать модификатор для блока и стилизовать каскадом
.contacts.contacts--theme--header.header__contacts
.contacts__item
.contacts__link
.contacts--theme--header .contacts__link {
}
Это вроде как противоречит идеям бэм, но мне кажется наиболее удачным решением.
2. Второй кейс. У нас есть базовый блок карточки
.card
.card__img
.card__inner
.card__title
.card__content
.card__btn
Допустим она используется в каталоге. Но так же на странице с портфолио, но выглядит немного иначе.
Создавать пустой микс класс .portfolio-card мне кажется плохой практикой, т.к. мы привязываемся к контексту. А что если эта модифицированная карточка будет еще на какой-то странице? Тогда само слово portfolio уже будет ни к селу ни к городу.
Микс portfolio__img
, portfolio__inner
и т.д. тоже не жизнеспособны, т.к. нам нужно менять элементы именно в контексте карточки.
Я пришел к тому, что лучше всего будет давать карточкам абстрактные модификаторы
.card.card--type--1
.card__img
.card__inner
.card__title
.card__content
.card__btn
.card--type--1 .card__img{
}
И стилизовать каскадом. Это дает нам полную модульность и свободу. Мы можем использовать модифицированные карточки где угодно в проекте. Более того, можно комбинировать модифицированные карточки с модификаторами элементов как угодно, например:
.card.card--type--1
.card__img.card__img--hover--green
.card__inner.card__inner--color--red
.card__title
.card__content
.card__btn
.card--type--1 .card__img{
}
Таким образом я прихожу к выводу, что миксы полезны в основном для позиционирования блока в контексте другого блока и совмещения стилей уже готовых независимых блоков используемых в проекте. А создавать их на лету, только для косметических изменений - бесполезно и даже вредно. А каскад же в данных случаях православен и полезен. И использовать его хочется все больше и больше, хотя он противоречит доктринам.
Был бы очень рад услышать аргументированную критику и ваши мысли на этот счет.
Насколько я понимаю БЭМ не запрещает использовать вложенность а только не добавлять её необоснованно. При стилизации элемента в зависимости от состояния блока вложенность обоснована (а как иначе в элементе узнать что состояние блока изменилось). Если на каждую модификацию блока добавлять JS-сом модификатор на какие-то элементы - это дублирование логики и тогда придётся в JS следить за синхронным добавлением и снятием классов.
А вот что БЭМ действительно запрещает так это стилизовать блок в зависимости от контекста его использования
Нет, не думаю. Мне кажется стилизовать вложенные элементы или блоки от модификатора вполне обосновано. Допустим дочерние элементы блока contacts стилизовать от модификатора contacts--view--header, conctacs--view--footer и т.д.