isolate-style.md

Изоляция стилей

Изоляция стилей решает проблему конфликта имен CSS-классов путем добавления к этим именам префиксов, которые обычно генерируются случайным образом. Это позволяет использовать одинаковые имена классов в разметке разных компонентов, гарантируя отсутствие конфликтов в рамках всего приложения. Более подробно об изоляции стилей в докладе Жизнь в изоляции.

Способы изоляции:

• <b:isolate/> – изоляция всей разметки и стилей шаблона
• <b:style ns/> – изоляция конкретного файла стилей
• <b:include isolate/> – изоляция включаемого фрагмента разметки и его стилей

<b:isolate/>

Изоляция всей разметки и стилей шаблона. Применяется к финальной разметке шаблона, то есть после обработки всех включений и подключения всех стилей. Не наследуется, то есть действует только для самого шаблона.

Например, в результате обработки шаблона:

<b:isolate/>
<b:style>
  .some-class {
    color: red;
  }
</b:style>

<div class="some-class">Компонент</div>

Разметка примет вид:

.i1__some-class {
  color: red;
}

<div class="i1__some-class">Компонент</div>

Подробнее в описании <b:isolate>

<b:style ns/>

Изоляция подключаемого файла стилей. В этом случае обращение к именам классов файла осуществляется с указанием заданного пространства имен.

<b:style ns="foo"/>

<div class="example foo:example"/>

Подробнее в описании <b:style>

<b:include isolate/>

Если требуется изолировать включаемый фрагмент (шаблон), то используется атрибут isolate. При этом изоляция применяется только к разметке и стилям включаемого фрагмента.

<b:style>
  .foo {
    color: red;
  }
</b:style>

<div class="foo">
  <b:include src="./foo.tmpl" isolate/>
</div>

foo.tmpl:

<b:style>
  .foo {
    color: green;
  }
</b:style>

<div class="foo"/>

Результат:

<b:style>
  .foo {
    color: red;
  }
  .xh7jokjfx7jo2ccq__foo {
    color: green;
  }
</b:style>

<div class="foo">
  <div class="xh7jokjfx7jo2ccq__foo"/>
</div>

Подробнее в описании <b:include>