Basis.js 1.3 features <b:isolate> and b:show in use. Example from devpanel style refactoring: https://github.com/basisjs/basisjs/commit/b17a8026684c3cd2e1a5a6fafac6b55ecefee236

1_template__AFTER.html

<b:style src="./item.css"/>
<b:isolate/>

<div class="item">
  <div class="title" event-click="toggle" event-mouseenter="enter" event-mouseleave="leave">
    <div b:show="{nestedViewCount}" class="expander"/>
    <span b:show="{satelliteName}" class="satelliteName">
      {satelliteName}
    </span>
    <span b:show="{namespace}" class="namespace">
      {namespace}.
    </span>
    {name}
    <span class="id">
      #{id}
    </span>
    <span b:show="{nestedViewCount}" class="count">
      {nestedViewCount}
    </span>
  </div>
  <div{childNodesElement} class="content"/>
</div>

1_template_BEFORE.html

<b:style src="./item.css"/>
<b:define name="nestedViewCount" type="bool"/>
<b:define name="satelliteName" type="bool"/>
<b:define name="namespace" type="bool"/>

<div class="basisjs-devpanel-ui-view-item">
  <div class="basisjs-devpanel-ui-view-item__title" event-click="toggle" event-mouseenter="enter" event-mouseleave="leave">
    <div class="basisjs-devpanel-ui-view-item__expander basisjs-devpanel-ui-view-item__expander_{nestedViewCount}"/>
    <span class="basisjs-devpanel-ui-view-item__satelliteName basisjs-devpanel-ui-view-item__satelliteName_{satelliteName}">
      {satelliteName}
    </span>
    <span class="basisjs-devpanel-ui-view-item__namespace basisjs-devpanel-ui-view-item__namespace_{namespace}">
      {namespace}.
    </span>
    {name}
    <span class="basisjs-devpanel-ui-view-item__id">
      #{id}
    </span>
    <span class="basisjs-devpanel-ui-view-item__count basisjs-devpanel-ui-view-item__count_{nestedViewCount}">
      {nestedViewCount}
    </span>
  </div>
  <div{childNodesElement} class="basisjs-devpanel-ui-view-item__content"/>
</div>

2_style__AFTER.css

.title
{
  padding: 3px 2px 4px 18px;
  position: relative;
  font-size: 12px;
}
.title:hover
{
  background: rgba(0,0,0,.1);
  cursor: pointer;
}

.expander
{
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border: 1px solid #AAA;
  background: #CCC;
  border-radius: 2px;
}

.satelliteName
{
  display: none;
  padding: 1px 5px 2px;
  margin: 0 1ex 0 -2px;
  background: #AD0;
  border-radius: 3px;
  font-size: 11px;
}

.namespace
{
  color: #777;
  font-size: 11px;
}

.id
{
  color: #069;
  padding-left: 1ex;
}

.count
{
  margin-left: 1ex;
  background: #DDD;
  padding: 1px 4px;
  font-size: 11px;
  border-radius: 3px;
}

.content
{
  padding-left: 20px;
}

2_style_BEFORE.css

.basisjs-devpanel-ui-view-item__title
{
  padding: 3px 2px 4px 18px;
  position: relative;
  font-size: 12px;
}
.basisjs-devpanel-ui-view-item__title:hover
{
  background: rgba(0,0,0,.1);
  cursor: pointer;
}

.basisjs-devpanel-ui-view-item__expander
{
  display: none;
  position: absolute;
  left: 3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border: 1px solid #AAA;
  background: #CCC;
  border-radius: 2px;
}
.basisjs-devpanel-ui-view-item__expander_nestedViewCount
{
  display: block;
}

.basisjs-devpanel-ui-view-item__satelliteName
{
  display: none;
  padding: 1px 5px 2px;
  margin: 0 1ex 0 -2px;
  background: #AD0;
  border-radius: 3px;
  font-size: 11px;
}
.basisjs-devpanel-ui-view-item__namespace
{
  display: none;
  color: #777;
  font-size: 11px;
}

.basisjs-devpanel-ui-view-item__satelliteName_satelliteName,
.basisjs-devpanel-ui-view-item__namespace_namespace
{
  display: inline;
}

.basisjs-devpanel-ui-view-item__id
{
  color: #069;
  padding-left: 1ex;
}

.basisjs-devpanel-ui-view-item__count
{
  display: none;
  margin-left: 1ex;
  background: #DDD;
  padding: 1px 4px;
  font-size: 11px;
  border-radius: 3px;
}
.basisjs-devpanel-ui-view-item__count_nestedViewCount
{
  display: inline;
}

.basisjs-devpanel-ui-view-item__content
{
  padding-left: 20px;
}