а ещё там просится toggleMod https://ru.bem.info/tutorials/classic/i-bem/modifiers/#%D0%BF%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-toggle-%D0%BC%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D0%B0

Всем привет. Посмотрел пару видасов, почииал бэм.инфо и че-то не пойму. Так можно внешнюю геометрию блокам задавать или нет?

Подскажите пожалуйста.

И еще, а как без бордеров обходиться? Кроме того с box-sizing:border-box бордеры не влияют на размер.

Геометрию можно, отступы нельзя

Паддинги только можно или как?

Прост не до конца понимаю, как в таком элементарном блоке как сетка миникарточек товаров сделать вертикальные промежутки между блоками.

Внутри блока можно и отступы и падинги. Суть в том что вы делаете блок так чтоб потом могли его реиспользовать в другом месте без правки отступов внешних

Внешние отступы задаются родительским элементом. Как правило это элемент другого блока

Подскажите плиз вот какой момент.

Вот конкретный пример: http://joxi.ru/VrwVb8BF7oJOKA

Как в нем задать выделенный красным отступ?

Паддингом внутри миникарточки товара?

Или создать модификатор productItem__products-list и уже ему присвоить нижний маргин?

Блок grid, в нем элемент grid__item у него Паддинг снизу и в нем ваш блок карточка товара

То есть вы задали отступ у врапера а не у самого блока в листинге

То есть надо вот такую структуру делать (допустим, что класс productMinicard  я создавал гораздо раньше)?

<div class="productsList">
    <div class="productMinicard  productsList__item">
    </div>
    <div class="productMinicard  productsList__item">
    </div>
    <div class="productMinicard  productsList__item">
    </div>
</div>

😕 запутался ппц

По ходу понял

Все верно, лично я предпочитаю не миксовать элемент на блок а вкладывать, но все верно

Подскажите последний вопрос плиз. Семантически с точки зрения БЭМ будет лучше тот вариант структуры, который я указывал выше или вот такой?
<div class="productsList">
    <div class="productsList__item">
         <div class="productMinicard">
         </div>
    </div>
    <div class="productsList__item">
         <div class="productMinicard">
         </div>
    </div>
    <div class="productsList__item">
         <div class="productMinicard">
         </div>
    </div>
</div>

Просто получается, что класс productsList__item из первого варианта выступает скорее в роли модификатора для класса productMinicard.