Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Trasformare in BEM un CSS esistente

Un semplice esempio per comprendere il funzionamento della metodologia BEM (Block, Element, Modifier), trasformando un esempio da CSS "classico" a BEM.
Un semplice esempio per comprendere il funzionamento della metodologia BEM (Block, Element, Modifier), trasformando un esempio da CSS "classico" a BEM.
Link copiato negli appunti

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

Ti consigliamo anche