Шаблоны могут подключать файлы стилей, которые они используют. Обычно рядом с файлом шаблона располагается файл с таким же именем, но с расширением .css содержащий стили к шаблону. Шаблон может подключать произвольное количество файлов стилей.
Основной атрибут src, в нем указывается путь к файлу стилей. Если описание шаблона находится в отдельном файле, то путь разрешается относительно него, иначе относительно корня приложения. Для значения src применяются те же правила преобразования путей, что и для basis.resource().
<b:style src="./item.css"/>
<div class="item">
...
</div>
В режиме разработки, стили подключаются на страницу в момент когда создается первый экземпляр шаблона. Если несколько шаблонов используют один и тот же файл стилей, то он подключается только один раз. Если описание шаблона (шаблонов) изменяется так, что перестает использовать определенный файл стилей, и этот файл не используется другими шаблонами, то стиль изымается из страницы.
В сборке стили объединяются в один файл и динамического подключения/отключения стилей не происходит. Если используются темы, то генерируется несколько файлов стилей, в каждый из которых попадают только те стили, которые относятся к теме; при смене темы происходит смена используемого файла стилей (в один момент используется только один файл, соотвествующий текущей теме).
Тег <b:style> не обязательно должен ссылаться на внешний файл стилей. Атрибут src может быть опущен, а CSS указан как контент тега <b:style>.
<b:style>
.demo { color: red; }
</b:style>
<div class="demo">
I'm red
</div>
Если указан атрибут
src, то контент внутри<b:style>игнорируется.
Технически шаблонизатор создает виртуальный ресурс из содержимого тега, поэтому все механизмы работают независимо от того используется ли атрибут src или CSS описан в самом <b:style>.
Если шаблон включает в себя другой шаблон (через <b:include>) и включаемый шаблон содержит подключение стилей (теги <b:style>), то эти стили подключаются как собственные. Стили из подключаемых шаблонов ставятся до стилей подключающего шаблона.
В случае если нужно включить из другого шаблона только разметку без стилей, то тегу <b:include> добавляется атрибут no-style.
Шаблон:
<b:style src="./my.css">
<div class="my-component">
<b:include src="./include.tmpl"/>
</div>
include.tmpl
<b:style src="./include.css"/>
<div class="some-include">
Hello world
</div>
Эквивалентно:
<b:style src="./include.css"/>
<b:style src="./my.css">
<div class="my-component">
<div class="some-include">
Hello world
</div>
</div>
Так как шаблоны могут инициироваться в любой момент (когда создается их первый экземпляр) и подключать несколько файлов стилей в произвольном порядке, то нельзя полагаться на порядок подключения стилей. Обычно это не доставляет проблем, но это стоит учитывать, если в разных файлах стилей описываются правила с одинаковым весом (specificity), применимые к элементу.
С помощью атрибута ns (или namespace) можно изолировать подключаемый стиль. В качестве значения атрибута указывается имя пространства имен. В этом случае всем классам в файле стилей будет добавлен некоторый уникальный префикс.
Чтобы использовать имена классов из такого файла стилей, в атрибуте class необходимо предварять имена класов префиксом namespace:, где namespace - имя простраства имен (значение атрибута ns). В этом случае указанный префикс будет заменяться на уникальный префикс, назначеный для файла стилей.
Таким образом возможно избегать конфликта имен классов из разных файлов стилей.
<b:style src="./style.css"/>
<b:style src="app:icons.css" ns="icon"/>
<b:style src="/bootstrap.css" ns="bt"/>
<div class="component bt:active active">
<span class="icon:active bt:icon"/>
</div>
В данном примере icon:active будет использоваться из файла app:icons.css, bt:active и bt:icon из /bootstrap.css, а active из style.css. После обработки разметка будет иметь такой вид:
<div class="component e3m9txir14yu5oq2__active active">
<span class="m3yob6qh0fd0jwog__active e3m9txir14yu5oq2__icon"/>
</div>
Префикс генерируется случайным образом. Вид имени класса может трансформироваться разным способом, в зависимости от настроек и окружения. Но способ преобразования одинаковый для файла стилей и для разметки.
Если для файла стилей используется атрибут ns, он изолируется единожды и используется для всех шаблонов. Другими словами, такой файл используется как библиотека для всех шаблонов. При этом значение атрибута ns не имеет значения, и используется лишь локально, для определения соотвествия в рамках описания шаблона.
Определенные в шаблоне пространства имен не применяются к описанию подключаемых шаблонов, как и не наследуются из подключаемых шаблонов. Если в префиксе имени класса указано не объявленное имя простраства имен (нет <b:style> с определенным значением атрибута ns), то такой класс удаляется из разметки.
Шаблон:
<b:style src="./1.css" ns="foo">
<div class="foo:one bar:two">
<b:include src="./2.tmpl"/>
</div>
include.tmpl
<b:style src="./2.css" ns="bar">
<div class="foo:one bar:two"/>
Результирующая разметка:
<div class="oeuj905r8en1wuvw__one">
<div class="trisd0m91p24u6ck__two"></div>
</div>
Другие возможности изоляции стилей читайте в Изоляция стилей.