Trasformare in BEM un CSS esistente

13 ottobre 2014

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;
	}	
}

Tutte le lezioni

1 ... 14 15 16 ... 18

Se vuoi aggiornamenti su Trasformare in BEM un CSS esistente inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Trasformare in BEM un CSS esistente

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy