Всем привет! Такой у меня вопрос:
Есть блок aside
, он располагается сбоку и в общем случае выглядит вот так: ссылка на картинку
Логотип вынесен в отдельный блок logo
, у него есть текстовые элементы logo__bold
, logo__thin
и logo__desc
.
У aside
есть модификатор --collapsed
, который делает его узким: ещё ссылка на картинку
Как тут можно грамотно распространить влияние модификатора aside--collapsed
на элементы блока logo
?
Как .aside--collapsed .logo__desc { display: none; }
, но в контексте БЭМ.
Вариант
.aside--collapsed .logo__desc { display: none; }
вполне годный, см. https://ru.bem.info/method/faq/#Почему-нежелательно-использовать-вложенные-селекторыСпасибо! Подумал, что это может негативно сказаться на независимости блоков, например, если со временем блок
logo
мутирует во что-то другое, а стили для него останутся.Общая идея в том, что родитель может знать о потомках, а потомки о родителе знать не должны. И, соответственно, весь код, который знает про
aside
, нужно хранить рядом сaside
, даже если он в результате влияет наlogo
. Тогда стили логотипа всегда буду независимыми, а вот боковая панель, которая умеет сжиматься, будет вынуждена знать про то, как она сжимает то, что в нее вложено. Впрочем, в данном конкретном случае можно попробовать ко всем вложенным вaside
блокам и/или элементам, которые следует прятать приaside--collapsed
, примиксовать элемент самого блокаaside
. Получится что-то типа:и аналогично для остальных скрываемых элементов. Тогда в стилях достаточно будет: