HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Editor audio video
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Giochi
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Giochi >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Fotoritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
GuideHTMLJavaLinguaggio CPythonJavaScriptPHPC++CSSAndroidApprofondimenti
INDICE DELLA GUIDA
  1. 1 SASS, introduzione e installazione

  2. 2 Selettori nidificati

SassScript
  1. 3 La direttiva @extend e i placeholeder (con %)

  2. 4 I mixin

  3. 5 Tipi di variabili in SASS

  4. 6 Esempi con @mixin

  5. 7 @if, controlli condizionali in SASS

  6. 8 @for, @each e @while, i cicli in SASS

Compass
  1. 9 Compass, sfondi multipli e gradienti

  2. 10 Compass, trasformazioni e transizioni

  3. 11 Animazioni con Compass

Caratteristiche avanzate
  1. 12 Media queries

  2. 13 La direttiva @function

  3. lezione
    14 di 18

    BEM, Block Element Modifier

  4. 15 Trasformare in BEM un CSS esistente

  5. 16 @import, parziali e StyleDocco: mettere ordine

Oltre SASS
  1. 17 Estendere SASS con Ruby

  2. 18 SASS e Grunt

  • Learn
  • Guida SASS
  • BEM, Block Element Modifier
lezione
14 di 18

BEM, Block Element Modifier

  • di Davide Brognoli
  • 13 Ottobre 2014

Abbiamo visto come SASS ci permetta di migliorare la stesura dei fogli di stile. Per rendere ancora più leggibile il nostro codice possiamo implementare lo standard BEM (Block Element Modifier).

L’idea che sta alla base della metodologia BEM è quella di definire alcune regole per la definizione delle classi degli elementi basandosi sulle proprietà degli elementi stessi. La definizione delle classi si basa su tre componenti: il blocco, l’elemento e la variante.

  • il blocco;
  • l’elemento;
  • la variante.

Il blocco

Il blocco è il contenitore o il contesto in cui l’elemento si trova. È un entità indipendente che può essere semplice o composta da ulteriori blocchi. Possiamo ad esempio dividere una semplice pagina Web in quattro blocchi: header, content, sidebar e footer. Questi blocchi costituiranno la base delle nostre classi CSS.

L’elemento

Il secondo componente della metodologia BEM è l’elemento. L’elemento è un singolo componente inserito in un blocco. Esempi di elementi sono un logo, un input, un link.

La classe di ogni elemento viene definita da un nome semplice, chiaro e univoco preceduto dal blocco e da due underscore:


blocco__elemento

La classe identificativa del logo sarà, ad esempio:


header__logo

mentre quella dei link di navigazione sarà:


header__link

La variante

L’ultimo componente da valutare è la variante che definisce versioni differenti di un elemento.

La variante andrà specificata come terzo parametro della classe e verrà separata dall’elemento con due trattini. Possiamo ad esempio identificare i link di navigazione come:


header__link

e i link selezionati come:


header__link--selected

Con queste tre semplici componenti andremo a definire le classi di tutti i tag della nostra pagina HTML.

SASS e BEM, più facili che mai

Spesso la variante modifica solamente una proprietà di un elemento: colore, font, background. Supponiamo di aver definito una classe per i link presenti nell’header:


.header__link 
{
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

Abbiamo ora la necessità di definire una variante di questi link con colore del testo rosso. Seguendo la metodologia BEM dovremmo creare una variante:


.header__link--red
{
	color: #FF0000;
}

Dovremmo poi arricchire il nostro elemento con entrambe le classi:


<a href="http://html.it" class="header__link header__link--red">HTML.it</a>

In alternativa possiamo sfruttare SASS ed in particolare la funzione di @extend e modificare il precedente codice in questo modo:


.header__link
{
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}
.header__link--red 
{
	@extend .header__link;
	color: #FF0000;
}

<a href="http://html.it" class="header__link--red">HTML.it</a>

Con questa soluzione, ogni modifica sulla classe header__link andrà a modificare anche le varianti.

Se vuoi aggiornamenti su CSS inserisci la tua e-mail nel box qui sotto:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

15 / 18

Trasformare in BEM un CSS esistente

Ultime notizie

FinalCrypt: File Encryption Application open source

PHP: meno ricerche = meno utilizzatori?

Ubuntu 14.04: fine del supporto il 30 aprile 2019

Social media marketing: gli errori più frequenti

IBM Think 2019: nuove soluzioni per il Cloud ibrido

I Video di HTML.it

Nino Guarnacci

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Guida SASS

  • 18 Lezioni
  • Facile

Un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso . Esistono diversi preprocessori CSS tra cui orientarsi, la nostra scelta cade su SASS, che si distingue per completezza, stabilità, estensibilità e integrazione con gli altri componenti tipici di uno stack Web moderno.

  • w3.css: guida all'uso
  • Forme geometriche: come costruire con i CSS

SASS: annidare o non annidare?

L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.

  • PHP: meno ricerche = meno utilizzatori?
  • Chrome: nuovi piani per la webRequest API

Modello unico per i siti dei Comuni Italiani

Facebook lancia Spectrum, per comprimere le immagini

Compass + WordPress: e vissero felici e contenti…

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.10.2