Телеграмм чат группы bem

2019 February 22

AY

Alexey Yarrr (qfox) in БЭМ

Roman

Привет.
Как правильно задавать отсупы в блоках? Только с помощью padding?

Не принципиально. Можно и .block__wrapper { border: ... }, который будет лежать внутри блока. Зависит от задачи

источник

21:26пожаловаться #1

R

Roman in БЭМ

Alexey Yarrr (qfox)

Не принципиально. Можно и .block__wrapper { border: ... }, который будет лежать внутри блока. Зависит от задачи

Спасибо. Точно таким же образом можно задавать другие «параметры», которые запрещены:

«Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование»

источник

21:27пожаловаться #2

AY

Alexey Yarrr (qfox) in БЭМ

Поясни, пожалуйста, вопрос? На блок не стоит вешать margin, это правда)

источник

21:38пожаловаться #3

AG

Ayrat GG in БЭМ

Можно установить два класса block block__wrapper, где block__wrapper имеет { margin: ...}

источник

21:44пожаловаться #4

AY

Alexey Yarrr (qfox) in БЭМ

не, тогда блок будет влиять на внешнюю геометрию и смысла мало выносить в элемент

источник

21:44пожаловаться #5

R

Roman in БЭМ

Ну вот, я как раз за это и говорю. Где мне указывать margin?

источник

21:57пожаловаться #6

R

Roman in БЭМ

в block__wrapper?

источник

21:57пожаловаться #7

R

Roman in БЭМ

Там же, если нужно, position?

источник

21:58пожаловаться #8

Р

Роман in БЭМ

Нужно понять, какой блок «вызывает» понимание об отступах. Если в блоке header есть логотип и меню, то расстояние между ними «диктует» именно header:

<header class="header">
  <div class="logo header__logo">…</div>
  <div class="menu header__menu">…</div>
</header>

.header__logo + .header__menu {
  margin-left: 20px;
}

источник

22:09пожаловаться #9

Р

Роман in БЭМ

Там же пропишутся и размеры для логотипа (а не в блоке logo), потому что это тоже внешняя геометрия:

.header__logo {
   width: 200px;
}

источник

22:12пожаловаться #10

Р

Роман in БЭМ

А миксовать блок (block block__wrapper) со своим же элементом практически бессмысленно.
+ wrapper'ы не нужны: https://ru.bem.info/forum/656/

источник

22:15пожаловаться #11

R

Roman in БЭМ

Роман

Нужно понять, какой блок «вызывает» понимание об отступах. Если в блоке header есть логотип и меню, то расстояние между ними «диктует» именно header:

<header class="header">
  <div class="logo header__logo">…</div>
  <div class="menu header__menu">…</div>
</header>

.header__logo + .header__menu {
  margin-left: 20px;
}

Ооо, вот, спасибо! Теперь понял!

источник

22:16пожаловаться #12

2019 February 23

BP

Boroda Pavel in БЭМ

Всем привет. Просьба подсказать - не слишком ли замороченная структура, ради четырёх кнопок?

источник

09:02пожаловаться #13

BP

Boroda Pavel in БЭМ

источник

09:02пожаловаться #14

Р

Роман in БЭМ

Зависит от того, что вызвало «заморочку». Для меня самое сложно показалось фотографирование этого всего на телефон 😆

источник

10:41пожаловаться #15

BP

Boroda Pavel in БЭМ

Роман

Зависит от того, что вызвало «заморочку». Для меня самое сложно показалось фотографирование этого всего на телефон 😆

Ну замороченно, наверное не то слово. Точнее будет - правильная ли структура? Или просто все кнопки в одну папку сложить?

источник

11:31пожаловаться #16

BP

Boroda Pavel in БЭМ

Просто как я понял бэм - это чтобы любой компонент мог работать отдельно от общей конструкции и легко импортирован в другие проекты. Вроде такая структура позволит следовать этим правилам?

источник

11:37пожаловаться #17

VH

Vitaly Harisov in БЭМ

_buttons_arrow_blue по БЭМ не правильно

источник

11:46пожаловаться #18

VH

Vitaly Harisov in БЭМ

почитайте ещё раз https://ru.bem.info/methodology/filestructure/

ru.bem.info

Файловая структура / Методология / БЭМ

источник

11:48пожаловаться #19

Р

Роман in БЭМ

Boroda Pavel

Просто как я понял бэм - это чтобы любой компонент мог работать отдельно от общей конструкции и легко импортирован в другие проекты. Вроде такая структура позволит следовать этим правилам?

Всё становится на свои места, если понять — зачем это делать. В БЭМ-стеке это оправдано, потому что тогда в сборку попадают только те файлы, которые нужны (ненужные стили не «прилетят», потому что они в других файлах). Если у вас Pug и CSS просто импортируется из всех файлов в одну простыню, то смысла нет. Разве что теперь можно в пару касаний клавиш (Ctrl+P → bnblcss → button_standart_blue.scss) попасть на нужную декларацию вместо поиска.

источник

11:48пожаловаться #20