Trasformare in BEM un CSS esistente

Cerchiamo con un semplice esempio di capire meglio il funzionamento della metodologia BEM. Ipotizziamo di avere un menu così composto:

<ul class="main-menu">
	<li class="menu-item selected"><a href="#">First element</a></li>
	<li class="menu-item"><a href="#">Sceond element</a></li>
	<li class="menu-item"><a href="#">Third element</a></li>
</ul>

Il css potrebbe essere:

.main-menu
{
	width: 960px;
	background-color: #CCC;
	text-align: center;
	margin: 10px auto;
}
.menu-item
{
	display: inline-block;
	padding: 5px 20px;
}
.menu-item a
{
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
}
.menu-item.selected a
{
	color: #000;
}

Per utilizzare la metodologia BEM dobbiamo partire dalla divisione in blocchi, elementi e modificatori. Nel nostro esempio possiamo identificare come blocco il menu stesso, come elementi le diverse voci (tag li) e come modificatore la voce selezionata Il codice HTML sarà trasformato in questo modo:

<ul class="menu">
	<li class="menu__item--selected"><a href="#">First element</a></li>
	<li class="menu__item"><a href="#">Sceond element</a></li>
	<li class="menu__item"><a href="#">Third element</a></li>
</ul>

e il css diventerà (con l'aiuto di SASS):

.menu
{
	width: 960px;
	background-color: #CCC;
	text-align: center;
	margin: 10px auto;
}
.menu__item
{
	display: inline-block;
	padding: 5px 20px;
	a{
		color: #FFF;
		text-decoration: none;
		text-transform: uppercase;
	}
}
.menu__item--selected
{
	@extend .menu__item;
	a{
		color: #000;
	}
}