Внешний вид, позиционирование по БЭМ

[RinatMullayanov]

Ознакомился с материалами на https://ru.bem.info/, но не могу для себя прояснить ряд моментов, объясните пожалуйста:

1. Где должен быть описан внешний вид блока (размер, цвет и т.д.): можно в css-классе блока писать или обязательно в модификаторе блока? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
2. Где должен быть описан внешний вид элемента: можно в css-классе элемента или обязательно в модификаторе элемента? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
3. В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?
4. Все что касается позиционирования элемента я могу писать в css-классе элементе?

[tadatuta]

1. Где должен быть описан внешний вид блока (размер, цвет и т.д.): можно в css-классе блока писать или обязательно в модификаторе блока? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?

Можно смело писать прямо на класс до тех пор, пока не возникнет необходимость отменять такие стили по умолчанию. В этот момент можно вынести их в модификатор.

2. Где должен быть описан внешний вид элемента: можно в css-классе элемента или обязательно в модификаторе элемента? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?

Аналогично предыдущему ответу.

3. В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?

Если дочитать тот же документ до раздела про миксы, там найдется ответ: https://ru.bem.info/methodology/quick-start/#Микс

4. Все что касается позиционирования элемента я могу писать в css-классе элементе?

Да, т.к. элементы — это «внутренняя кухня» блока.

[RinatMullayanov]

@tadatuta По поводу 3-го пункта - вы хотите сказать что:

1. Блок может быть одновременно и элементом родительского блока? И позиционирование описать в css-классе этого элемента?
2. А как быть с тем что мы можем использовать одни и те же свойства как в css-классе блока, так и в css-классе элемента. К примеру:

   <!-- Блок `header` -->
   <div class="header">
   <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
   <div class="search-form header__search-form"></div>
   </div>

   Допустим в search-form я задал position: relative; чтобы использовать это для позиционирования элементов search-form. А в элементе header__search-form я задам position: absolute; чтобы позиционировать уже элемент header__search-form в блоке header.

Или я search-form задал display: flex;, а в header__search-form display: block; и float: left;.

Т.е., в общем случае, не получится написать header__search-form не посмотрев что используется в search-form.

[kompolom]

@RinatMullayanov 1 Да. можно

2. Здесь играет роль в каком порядке идут стили. При использовании полного БЭМ стека эта проблема решается с помощью зависимостей.

[tadatuta]

@RinatMullayanov в целом все так. Для случаев, когда есть вероятность подобных пересечений, нужно просто не экономить на DOM-узлах и делать

<div class="header">
    <div class="header__search-form"> <!-- отвечает за позиционирование -->
        <div class="search-form"></div>
    </div>
</div>

[RinatMullayanov]

@tadatuta @kompolom понял, большое спасибо за разъяснения.

[AlexandrKom]

т.к. бэм должен быть понятен с первого взгляда, может следующая конструкция более уместна? потому как вряд ли будет понятно, что <div class="header__search-form"> отвечает за позишн.

<div class="header header__position">
...<div class="header__search-form">         
...</div>
</div>

[tadatuta]

@AlexandrKom header__search-form отвечает за позиционирование формы, а, скажем, header__logo — за позиционирование логотипа. И так далее.

[AlexandrKom]

1. Что-то мне подсказывает, что такая обертка не есть тру, т.к. это дополнительный тег, и если каждый блок оборачивать - таких оберток будет довольно много, а ведь можно и обойтись без них.
2. Вам не кажется, что происходит отрыв информации касающейся бэм-блока (его позишн) от самого блока.
3. если я захочу перенести блок в другой проект/страницу/бэм-блок - мне придется создавать на новом месте новую обертку для него и писать заново css. Не быстрее поправить пару цифр в классе?

[tadatuta]

Что-то мне подсказывает, что такая обертка не есть тру, т.к. это дополнительный тег, и если каждый блок оборачивать - таких оберток будет довольно много, а ведь можно и обойтись без них.

Избавиться от дополнительных оберток можно с помощью миксов. Но вообще выбирая между возможностью повторного использования блока целиком VS экономии на обертке достаточно очевидно, что победит повторное использование.

Вам не кажется, что происходит отрыв информации касающейся бэм-блока (его позишн) от самого блока.

В том-то и дело, что блоки form, logo или button не должны ничего знать про свое позиционирование, т.к. могут быть использованы многократно в совершенно разных местах на странице, с разными отступами и так далее. Про то, что логотип имеет отступ в 22 пикселя от границы шапки должна знать именно шапка (в ней всегда есть такой отступ от края, а логотип где-нибудь подвале вполне может иметь другие отступы и там пусть за них отвечает подвал).

если я захочу перенести блок в другой проект/страницу/бэм-блок - мне придется создавать на новом месте новую обертку для него и писать заново css. Не быстрее поправить пару цифр в классе?

Вот есть у меня блок button и я хочу его использовать 40 раз на проекте: «Войти», «Найти», «Сохранить», «Отмена», «Купить», «Отправить», «Подтвердить» и так далее. Как быть с парой цифр в классе?

[gexenemy]

В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)? Если дочитать тот же документ до раздела про миксы, там найдется ответ: https://ru.bem.info/methodology/quick-start/#Микс

можете объяснить почему тогда в исходном коде сайта бэма я вижу кучу блоков с позиционированием и без миксов?

[tadatuta]

@gexenemy, наверное, можем, но нужные конкретные примеры

[gexenemy]

@gexenemy, наверное, можем, но нужные конкретные примеры

Владимир, вот например блок с именем .nav position:fixed; top: 79; left: 9; либо выше блок .sitemap тоже есть свойства позиционирования и всё задано без миксов, хотя это вроде как противоречит документации?

[vithar]

У нас на этих выходных хакатон по БЭМ, я буду заниматься сайтом и сделаю ревью реализации блоков. Такие места подправлю.

[vithar]

@gexenemy посмотрел на стили блока .nav, у него не предполагается переиспользование в других местах и вводить искусственно элемент родителя только для того, чтобы задать ему позиционирование не вижу смысла, это будет тут избыточно.

[Realetive]

@vithar какаие-то «двойные стандарты» получаются: документация точно определяет, как следует позиционировать блоки. Соответственно, в данном случае nav следует сделать элементом «родительского элемента» (или внести уточнение в документ об исключениях).

[tadatuta]

БЭМ — это не про жесткие правила, а про рекомендации, которые упрощают жизнь.

Разумеется, в идеале стоит писать все, как написано в доке, но в реальности всегда бывают допущения с учетом знания о внутренней кухне и планах на дальнейшее развитие проекта. Особенно когда разработчик глубоко понимает, что он делает и к чему это может привести.

[vithar]

Я отрефакторил, чтобы не было двойных стандартов.

[lukasvs]

А почему не стоит в модификаторе блока указывать margin? Если можно на примере.

[AlexandrKom]

@lukasvs "В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?"

А почему не стоит в модификаторе блока указывать margin?

• потому что блок может использоваться неограниченное количество раз на разных страницах, и где то отступы уместны, а где то нет или нужны другие.

как делаем мы, если к блоку на определенной странице или в определенном месте нужен отступ, например margin-right в 10px, добавляем соответствующий класс class='b-block l-margin__right-normal' Так же для других отступов и позиционирования

[vithar]

Нет, мы миксируем к блоку элемент родителя, который может задавать свои отступы.

class="logo header__logo" или class="button checkout-form__submit"