БЭМ и задание размеров шрифта, кнопки, отступов

Форум /

Вопрос 1: Предположим имеется какой-нибудь блок карты (card), который в принципе может переиспользоваться в других проектах. Но в разных проектах разные размеры шрифтов. Каким образом поступить: задавать какой-то размер по-умолчанию (например подходящий для текущего проекта) или создавать модификаторы для размеров (или еще как-то)?

Вопрос 2: Предположим есть блок кнопки (button), и в разных местах одного и того же проекта ему задаются разные размеры, это все нужно задавать через модификаторы?

Вопрос 3: Иногда требуется задать отступы от одного блока до другого, как это лучше реализовать (через модификаторы)?

Вопрос 4: Одна и та же кнопка в разных проектах имеет некоторые различия во внешнем виде, но часть стилей одинаковая, в стиль блока запихнуть только общее, а остальное сделать через модификаторы (_theme_a, _theme_b)?

P.S. Новичок в БЭМ, вопросов много, извините.

6 years ago

Realetive

1) слишком «размытая» ситуация — в зависимости от деталей реализации могут меняться. Можно исходить из предположение, что если размер меняется, значит это модификации (и меняется, наверняка, не только размер шрифта, но и отступы), значит, это модификация size: card_size_small, card_size_large, card_size_medium и т. д. Если зависимость найти не получается (или она действительно ограничивается только размером шрифта), можно использовать микс, например: .card.font.font_size_large или .card.font.font_size_small

2) нужно понять, что именно влияет на блок, что вынуждает использовать разные размеры. Если дело опять в размере шрифта и внутренних отступах (padding), то это может быть один модификатор:

.button {
  background: #906090;
  font-size: 1rem;
  padding: 1em 1.5em;
}

.button_size_large {
  font-size: 1.2rem;
}

.button_size_small {
  font-size: 0.8rem;
}

3) через элементы родительского блока. У самого блока не должно быть «внешней геометрии»: явных width и height, margin'ов, position: absolute или position: fixed (за редким исключением, но такие даже в голову сейчас не приходят) и, соответсвенно, top, left, bottom и right. А вот у элементов — пожалуйста. Например, есть header с логотипом и меню. Соответсвенно, между этими элементами есть margin (а не у самих блоков logo и menu):

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

.header__logo {
  width: 200px;
}

.header__menu {
  position: relative;
  top: 4px;
}

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

4) абсолютно верно.

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