Добрый день. После прочтения документации на https://ru.bem.info. Возникли некоторые вопросы, которые я попытался максимально подробно описать с примерами, надеюсь на вашу помощь.
Я использую классическую схему именования (block-nameelem-name_mod-name_mod-val).
1. Можно ли вкладывать элементы принадлежащие к одному блоку в другой:
```html
Т.е. в этом примере имеется универсальный список (ul с классом "list") который я использую много где на странице, и в его элементы list__item вложены элементы post__time и post__author блока post. Можно ли так делать?
**2**. Служебный(приватный блок). Если я правильно понял, если в ходе именования возникает ситуация когда элемент имеет слишком сложную структуру, то его делают блоком(для удобства),
хотя он и не будет использоваться без своего родительского блока.
Например:
```html
<div class="events">
<ul class="events-list">
<li class="events-list__item">
<a href="#" class="events-list__link">
<div class="events__calendar">
<span class="events__day"></span><br>
<span class="events__month"></span>
</div>
<p class="events__details"></p>
</a>
</li>
</ul>
<a class="btn" href="#">Посмотреть все</a>
</div>
В данном случае внутри блока events я создал служебный блок events-list, чтобы не делать что-то вроде eventslist > eventslist-item events__list-link, т.к. это сбивает с толку. И опять таки служебный блок events-list содержит элементы блока events. Все ли я правильно понял и верна ли моя разметка? 3. Как я понял блок не может иметь внешнего позиционирования - margin. Но внутри блока margin, padding допускается использовать напрямую с элементами и даже с самим блоком? Или только через модификаторы? Пример:
<div class="block">
<div class="block__elem1"></div>
<div class="block__elem2"></div>
</div>
.block {
positon: relative;
padding: 10px;
}
.block__elem1 {
margin-top: 20px;
}
.block__elem2 {
position: absolute;
bot: 0;
}
4. Позиционирование. Имеется лента с блог-постами, мне нужно каждому посту задать внешние отступы, пример:
<div class="feed">
<div class="post feed__post"></div>
<div class="post feed__post"></div>
<div class="post feed__post"></div>
</div>
.feed {
padding: 10px 0;
}
.feed__post {
margin-bottom: 15px;
}
Мне нужно это сделать через родителя, как в примере? Или нужно использовать модификаторы типа:
<div class="post post_mb_10"></div>
.post_mb_10 {
margin-bottom: 10px;
}
Или мне нужно воспользоваться оберткой и задать отступ через нее, например добавить после feed элемент feed__item с margin. Все ли эти способы верны в БЭМ и какой из них предпочтительнее? 5. БЭМ осуждает каскад, но бывают случаи когда он необходим, например выпадающее меню:
.list__item:hover .list_sub {
display: block;
}
или
.list__item_active .list_sub {
display: block;
}
или создание темы для списка например:
.list_type_navbar .list__item {
padding: 10px 20px;
}
Такие исключения допускаются или есть какой-то обходной путь? Хотелось бы получить ответы на эти вопросы и исправить ошибки в разметке если таковые имеются. Спасибо!
В первом случае вам лучше сделать календарь отдельным блоком. Вложенность блоков в другие блоки и элементы это нормально:
Если вы хотите спозиционировать блок или элемент, используйте модификатор. При чем вы можете на один элемент вешать сколько угодно модификаторов post__position post__padding ну и само собой вы можете описывать все в миксах feed__post хотя я больше предпочитаю модификаторы
Используйте какскад, если он необходим, но всегда стремитесь обходиться без него