CSS свойства влияющие на окружение блока

Форум /

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

Какие именно CSS свойства не следует использовать при стилизации блока? Считается ли, что width, height, border, margin, position, float оказывают влияние на окружение? А padding, display влияют? Ещё свойства?

7 years ago

tadatuta

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

Если известно, что независимо от того, где данный блок потребуется, он будет иметь одинаковую высоту, ширину и рамку, то width, height и border можно смело оставлять. А вот margin, position и float с большой долей вероятности будет плохой идеей — нет гарантий, что в другом месте блок по-прежнему будет требовать таких же отступов и позиционирования. Разумеется бывают исключения, универсальное правило — руководствоваться здравым смыслом.

6 years ago

Pomar81

Добрый день. На сайте https://ru.bem.info/methodology/css/ обнаружил блок, у которого задана геометрия. Какие исключения можно делать для блоков? bem

6 years ago

Realetive

@Pomar81 в рамках здравого смысла — любые. И в padding'ах нет ничего криминального — это не «внешняя геометрия». А вот margin в этом примере правильнее было бы задать через микс родительского элемента. Или может даже:

.article-wrap {
  /* margin-bottom: -119px; */
  padding: 62px 32px 7px 111px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAAAAADy9EprAAAADklEQVQIW2P4z4AP/gEA/x0P7v3znXgAAAAASUVORK5CYII=)
}

P. S. Но я тут вообще «мимо крокодил»…

6 years ago

tadatuta

Действительно, margin можно было бы вынести в примиксованный элемент родителя, однако в данном случае исходили из того, что блок article-wrap никогда не будет использоваться в каком-либо другом контексте и решили «срезать угол». Конечно, такие упрощения непростительны при разработке универсальной библиотеки блоков, но допустимы локально для конкретного проекта, если разработчик четко представляет, как проект будет развиваться в дальнейшем.

Чтобы оставлять комментарии, необходимо авторизоваться.