Skip to content

Latest commit

 

History

History
128 lines (85 loc) · 5.73 KB

html.md

File metadata and controls

128 lines (85 loc) · 5.73 KB
Raw

HTML в BEMXML

HTML-разметка в BEMXML

Синтаксис

По умолчанию все узлы БЭМ-дерева в HTML представляются тегом <div>. Чтобы переназначить тег используется одноименный атрибут tag.

Исходный код:

<b:page-title tag="h1">Page Title</b:page-title>

Результат:

<h1 class="b-page-title">Page Title</h1>

HTML-атрибуты добавляются как есть, но в пространстве имен "x:"

Исходный код:

<b:link x:href="http://softline.ru">Softline</b:link>

Результат:

<a href="http://softline.ru" class="b-link">Softline</a>

Назначение семантики

Нести элементы html-разметки могут все БЭМ-сущности:

  • блоки (в т.ч. дополнительные)
  • элементы
  • модификаторы (в т.ч. модификаторы дополнительных блоков)

Уровень узла

Самый простой способ использования атрибутов для HTML – непосредственно в БЭМ-дереве:

<b:menu tag="ul">
	<e:item>
	<a:link x:href="/about">
		About
	</e:item>
</b:menu>

Уровень бандла

Чтобы каждый раз не задавать HTML-теги и атрибуты в БЭМ-дереве, используется специальный файл с декларациями – default-semantic.xml.

<default-semantic>
	<b:link tag="a" x:href="#" x:title=""/>
	<e:title block="form-fields-group" tag="legend"/>
	<m:type val="pseudo" block="link" tag="span"/>
</default-semantic>

Блоку link задается тег и атрибуты <b:link tag="a" x:href="#" x:title=""/>

Элементу title блока form-fields-group задается тег <legend> <e:title block="form-fields-group" tag="legend"/>

Для модификатора pseudo блока link тегом по умолчанию назначен <span>: <m:type val="pseudo" block="link" tag="span"/>

К странице может быть подключено несколько таких файлов, кроме того, раздел default-semantic может быть внедрен непосредственно на страницу. В этих случаях, если сущность объявлена несколько раз, действовать будет последняя декларация в порядке подключения.

Семантика уровня компилятора

Чтобы задавать HTML еще меньше в компилятор зашиты правила назначения семантики в зависимости от контекста.

На данный момент это следующие правила:

  • Для детей узла, имеющего тег <ul> или <ol>, тегом по умолчанию становится <li>.
  • Для всех потомков узла, имеющего дефолтный тег <a>, <span>, <strong>, <small>, <p>, <label>, <dt>, <abbr> и <h1>–<h6>, тегом по умолчанию становится <span>.

Исходный код:

<b:news>
    <e:item>Элемент новостей</e:item>
</b:news>

Фрагмент из default-semantic.xml: <b:news tag="ul"/>

Результат:

<ul class="b-news">
    <li class="b-news__item">Элемент новостей</li>
</ul>

Правила переопределения семантики

Присвоение семантики осуществляется на нескольких уровнях, каждый из которых имеет различную силу для разрешения конфликтов. В порядке усиления:

  1. Уровень шаблонизатора – зашитые в компилятор переопределения по умолчанию.
  2. Уровень бандла – в файле default-semantic.xml бандла
  3. Уровень узла – инлайново в БЭМ-сущностях на этом узле.

Уровень шаблонизатора используется только в том случае, если семантика для узла не определена на более высоком уровне.

Уровень бандла используется только в том случае, если семантика не определена на уровне узла.

На уровне узла и уровне бандла, семантика назначается в соответствии с силой БЭМ-сущностей для узла, в следующем порядке (от слабого к сильному):

  • блок/элемент
  • модификатор
  • дополнительная сущность
  • модификатор дополнительной сущности

Кроме того, имеет значение порядок записи БЭМ-сущностей. Например, в случае нескольких дополнительных блоков, сильнее будет тот, что записан последним. Это правило справедливо и для модификаторов.

Таким образом, можно по аналогии с CSS говорить о специфичности правил назначения семантики:

(уровень, сила, порядок записи).