Angular6: стили в "Tour of Heroes"

Display a Heroes List at angular.io - второй шаг создания приложения.
Tour of Heroes at stackblitz.com - исходники и само приложение на этот шаг описания.

Авторы предлагают такую разметку для файла src/app/heroes/heroes.component.html:

<h2>My Heroes</h2>

<ul class="heroes">

<li *ngFor="let hero of heroes">

<a routerLink="/detail/{{hero.id}}">

<span class="badge">{{hero.id}}</span> {{hero.name}}

</a>

</li>

</ul>

<!--

Copyright 2017-2018 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that

can be found in the LICENSE file at http://angular.io/license

-->

и такие стили для файла src/app/heroes/heroes.component.css:

/* HeroesComponent's private CSS styles */

.selected {

background-color: #CFD8DC !important;

color: white;

}

.heroes {

margin: 0 0 2em 0;

list-style-type: none;

padding: 0;

width: 15em;

}

.heroes li {

cursor: pointer;

position: relative;

left: 0;

background-color: #EEE;

margin: .5em;

padding: .3em 0;

height: 1.6em;

border-radius: 4px;

}

.heroes li.selected:hover {

background-color: #BBD8DC !important;

color: white;

}

.heroes li:hover {

color: #607D8B;

background-color: #DDD;

left: .1em;

}

.heroes .text {

position: relative;

top: -3px;

}

.heroes .badge {

display: inline-block;

font-size: small;

color: white;

padding: 0.8em 0.7em 0 0.7em;

background-color: #607D8B;

line-height: 1em;

position: relative;

left: -1px;

top: -4px;

height: 1.8em;

margin-right: .8em;

border-radius: 4px 0 0 4px;

}

/*

Copyright 2017-2018 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that

can be found in the LICENSE file at http://angular.io/license

*/

Такие стили я попробовал сделать похожими на CSS по БЭМ.
Разметка получилось такой:

<h2>My Heroes</h2>

<ul class="heroesList">

<li *ngFor="let hero of heroes"

class="heroesList__item"

[class.heroesList__item_selected]="hero === selectedHero"

[class.heroesList__item_notSelected]="hero !== selectedHero"

(click)="onSelect(hero)">

<span class="heroesList__item__badge">{{hero.id}}</span> {{hero.name}}

</li>

</ul>

<div *ngIf="selectedHero">

<app-myhero-detail [hero]="selectedHero"></app-myhero-detail>

</div>

Стили такими:

/* heroesList */

.heroesList {

margin: 0 0 2em 0;

list-style-type: none;

padding: 0;

width: 15em;

}

/* heroesList__item */

.heroesList__item {

cursor: pointer;

position: relative;

left: 0;

margin: .5em;

padding: .3em 0;

height: 1.6em;

border-radius: 4px;

color: #888;

}

.heroesList__item:hover {

left: .1em;

}

.heroesList__item_selected {

background-color: #CFD8DC;

color: white;

}

.heroesList__item_selected:hover {

background-color: #BBD8DC;

}

.heroesList__item_notSelected {

background-color: #EEE;

}

.heroesList__item_notSelected:hover {

color: #607D8B;

background-color: #DDD;

}

/* heroesList__item__badge */

.heroesList__item__badge {

display: inline-block;

font-size: small;

color: white;

padding: 0.8em 0.7em 0 0.7em;

background-color: #607D8B;

line-height: 1em;

position: relative;

left: -1px;

top: -4px;

height: 1.8em;

margin-right: .8em;

border-radius: 4px 0 0 4px;

}

/* the following classes were added to the tutorial CSS. why? */

.heroes .text {

position: relative;

top: -3px;

}

Такой вариант правил CSS мне больше нравится из-за схожести с ООП и компонентами и отсутствия important. В нем просто другая система Specificity: вместо перечисления вложенности тегов я использовал отдельные наименования для каждого настраиваемого элемента.

Полный проект с этим вариантом можно посмотреть тут: LearnAngular6_try1 at github.com