Мысли про миксы

Форум /

Знал БЭМ поверхостно - сейчас выделил время чтобы понять полностью. В целом все выглядит логично, кроме миксов. Возьмем пример с описания

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

Микс header__search-form добавляет некие стили форме поиска. Форма поиска у нас подключается программно модулем. Теперь решили, что форма поиска необходима и в футере. Описываем подключение модуля и там с тем же шаблоном. И у нас (если ни чего не менять) этот микс применится и в футере. Соответственно нам необходимо либо иметь два разных шаблона блока поиска, либо микс выводить по выполнению условия (скажем PHP формирует этот HTML). Что является по сути лишним. Гораздо более логично, понятно и чище будет обойтись без "миксов". Или, точнее, реализовывать их "обычным" способом каскадных стилей.

.header .search-form { color:red; }

Таким образом код блока (включая шаблон) будет абсолютно самостоятелен, в нем не будет необходимости учитывать/проверять контекст, в котором он подключается. Т.е. фраза из статьи

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости

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

5 years ago

Voral

Т.е. по логике, если читать получается header__search-form привязывает этот блок к конкретному родительскому блоку. Соответственно по сути он не может существовать вне блока header. Может тут пример не удачный выбран еще и он сбивает. Ведь маловероятно, что в header будут два блока поиска. А значит это уже элемент.... Со всеми вытекающими :)

5 years ago

Voral

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

5 years ago

Voral

Вообще ни один блок не должен ни диктовать условия дочернему (ведь не известно сколько их будет и какие они будут), так же и привязок к родительским или соседям. Тут правильнее ввести понятие Фабрика. Фабрика - будет описывать взаимосвязь между блоками. И выражаться по сути в простом каскаде стилей.

5 years ago

Voral

В прочем. Думаю я осознал: БЭМ это история исключительно про верстку, а не в целом проект. БЭМ, когда берем готовый сверстанный блок и вставляем в верстку, подразумевает возможность его модификации. Модификаторами и миксами.....

5 years ago

Realetive

Отнюдь. Скорее так: БЭМ — это про архитектуру, а инкапсуляцию стилей вы получаете «на сдачу». Плох не пример, а то, как вы пытаетесь понять суть миксов через опыт недекларативных шаблонов. Попробую объяснить: итак, мы имеем самостоятельную сущность — форму поиска. Мы описываем её шаблон, который, по запросу этого комонента возвращает нам некий html:

<div class="search-form">
  <!-- … -->
</div>

и его стили:

.search-form {
  background-color: #123;
  color: #321;
}

Всё, компонент (блок) готов (там ещё какой-то JS ему добавили, валидацию — не суть). Дальше, по мере разработки вы доходите до header'а — у него есть какие-то свои элементы, свои стили, логика и… внутри него есть наша поисковая форма. Естественно, она обладает какими-то размерами и расположением, что диктуется именно её «родителем», т. е. блоком header. И у нас есть два пути: первый — положить эту форму в элемент, «зарезервированный» элементом блока header:

<div class="header">
  <div class="header__logo"><!-- … --></div>
  <div class="header__search-form">
    <div class="search-form">
      <!-- … -->
    </div>
  </div>
  <div class="header__login"><!-- … --></div>
</div>

.header {
  display: flex;
}

.header__search-form {
  flex: 1;
  margin: 20px;
}

или мы можем захотеть «сэкономить» на DOM-узлах и объединить .header__search-form и .search-form — тогда получается микс. Причём за него отвечает сущность, которая знает, что внутри неё (или «на ней») будет другая, т. е. в шаблоне header__search-form:

block('header').elem('search-form')
  .replace()({ // 1) replace'им текущий DOM-узел новой сущностью…
    block: 'search-form',
    mix: { block: 'header', elem: 'search-form' } // 2) … но добавляем ей микс.
  })

4 years ago

alexyavorskiy2005-0711

Не совсем понял что это за код в конце? P.S. новичкок

4 years ago

lilliputten

Не совсем понял что это за код в конце? P.S. новичкок

Шаблоны bemhtml (bemtree/bemxjst):

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