{"id":28314,"date":"2019-09-04T00:00:00","date_gmt":"2019-09-03T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=28314"},"modified":"2021-01-13T09:40:28","modified_gmt":"2021-01-13T08:40:28","slug":"semplifichiamo-i-css-con-bem","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/","title":{"rendered":"Semplifichiamo i CSS con BEM"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Cos\u2019\u00e8 BEM<\/h2>\n\n\n\n

Partiamo dalle basi: BEM non \u00e8 un framework ma una metodologia, un modo particolare di scrivere e organizzare il codice CSS che amo definire \u201cBEM Philosophy\u201d, un gioco di parole per spiegare la pace interiore che si pu\u00f2 raggiungere attraverso l\u2019utilizzo di questa tecnica.<\/p>\n\n\n\n

Ricordate CSS Zen Garden? Anche se non c\u2019entra niente dal punto di vista tecnologico, il principio di poter lavorare sui fogli di stile senza rischiare l\u2019esaurimento nervoso \u00e8 lo stesso. Modificare un CSS \u00e8 un po\u2019 come disinnescare una bomba: non sai mai se la modifica che stai effettuando su un componente ne far\u00e0 esplodere un altro.<\/p>\n\n\n\n

Procediamo con ordine e andiamo ad analizzare una delle problematiche pi\u00f9 comuni derivante dalla codifica di CSS. Quante volte vi sar\u00e0 capitato di aver stilizzato un pulsante e magari di averlo riutilizzato dentro un altro blocco di codice e di perdere tutta la personalizzazione prevista?<\/p>\n\n\n\n

Guardiamo questo esempio di codice:<\/p>\n\n\n

\n<main class="container">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn">\n\u00a0\u00a0\u00a0\u00a0ENTER\n\u00a0\u00a0\u00a0\u00a0<\/button>\n<\/main>\n\u00a0\u00a0\u00a0\u00a0\u00a0\n<aside class="sidebar">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn">\n\u00a0\u00a0\u00a0\u00a0ENTER\n\u00a0\u00a0\u00a0\u00a0<\/button>\n<\/aside>\n<\/pre><\/div>\n\n
\n\/* CSS *\/\n\u00a0\u00a0\n.container .btn {\n           background: red;\n           color: white;\n           font-size: 15px;\n           height: 50px;\n           padding: 5px 10px;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\n
Il pulsante all\u2019interno di .container<\/strong> verr\u00e0 renderizzato in questo modo:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Guardate per\u00f2 cosa succede quando spostiamo il pulsante dentro .sidebar<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In questo esempio, abbiamo utilizzato un selettore di discendenza. Il pulsante cambia forma perch\u00e9 le propriet\u00e0 CSS vengono applicate solo quando .btn<\/strong> \u00e8 posizionato all\u2019interno del blocco .container<\/strong>. Di conseguenza, all\u2019interno di un qualsiasi altro blocco diverso, come ad esempio .sidebar<\/strong>, assumer\u00e0 una forma differente<\/p>\n\n\n\n
Sarebbe bello poter avere dei componenti univoci da poter spostare da un punto all\u2019altro del nostro layout e ritrovarli sempre uguali: ebbene, grazie alla metodologia BEM, tutto questo \u00e8 finalmente possibile!<\/p>\n\n\n\n
Vediamo come: BEM sta per Block \u2013 Element \u2013 Modifier<\/p>\n\n\n\n
  • .block<\/strong> : rappresenta l\u2019elemento padre, pu\u00f2 essere innestato in altri blocchi ma non deve essere dipendente da essi;<\/li>
  • .block__element<\/strong> : elemento, \u00e8 dipendente dal blocco;<\/li>
  • .block\u2014modifier<\/strong> : serve a modificare lo stile di base, pu\u00f2 essere applicato sia a un blocco che ad un elemento.<\/li><\/ul>\n\n\n\n
    Ad ogni elemento nel markup va assegnata una classe e gli ID non sono consentiti. Ad un primo approccio la sintassi potrebbe non essere molto gradevole alla vista e bisogner\u00e0 farci un po\u2019 l\u2019abitudine.<\/p>\n\n\n\n
    Ecco un esempio pratico dove .card<\/strong> rappresenta il blocco padre, mentre .card__title<\/strong> e .card__content<\/strong> sono gli elementi \u201cfigli\u201d ad esso correlati. Nella prima parte del selettore, prima del doppio underscore ( __ ) va indicato il nome del \u201cblocco\u201d da cui l\u2019elemento \u00e8 dipendente. Nella seconda parte dopo il doppio underscore, va indicato il nome (possibilmente semantico) dell\u2019elemento stesso:<\/p>\n\n\n
    \n<div class="card" >\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title" >Hello World!<\/h1 >\n\u00a0\u00a0\u00a0\u00a0<p class="card__content" >Text... <\/p >\n<\/div >\n<\/pre><\/div>\n\n\n
    In questo caso invece .card\u2014red<\/strong> rappresenta il modificatore<\/strong> di card e ne sostituisce il background di default. Nella prima parte del selettore, prima del doppio trattino ( — ) va indicato il nome del Blocco<\/strong> a cui il Modificatore<\/strong> dovr\u00e0 essere applicato, nella seconda parte dopo il doppio trattino, va indicato il nome del Modificatore<\/strong> stesso:<\/p>\n\n\n
    \n<div class="card card--red">\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title">Hello World!<\/h1>\n\u00a0\u00a0\u00a0\u00a0<p class="card__content">Text... <\/p>\n<\/div>\n<\/pre><\/div>\n\n\n
    Il CSS correlato invece sar\u00e0 questo:<\/p>\n\n\n
    \n.card {\n\u00a0\u00a0\u00a0\u00a0background: white;\n}\n\u00a0\u00a0\u00a0\u00a0.card.card--red {\n\u00a0\u00a0\u00a0\u00a0background: red;\n}\n<\/pre><\/div>\n\n\n
    \u00c8 possibile annidare i blocchi?<\/h2>\n\n\n\n
    La risposta \u00e8 s\u00ec! Un classico esempio \u00e8 una form<\/strong> posizionata all\u2019interno di un blocco .card<\/strong><\/p>\n\n\n
    \n<div class="card">\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title">Contacts <\/h1>\n\u00a0\u00a0\u00a0\u00a0<p class="card__content">Text... <\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<form class="form-contact">\n\u00a0\u00a0\u00a0\u00a0<input type="text" class="form-contact__input">\n\u00a0\u00a0\u00a0\u00a0<textarea ows="10" class="form-contact__message"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0<button class="form-contact__btn">SUBMIT<\/button>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n<\/pre><\/div>\n\n
    \n\/* CSS *\/\n\u00a0\u00a0\u00a0\u00a0.form-contact { ... }\n\u00a0\u00a0\u00a0\u00a0.form-contact__input { ... }\n\u00a0\u00a0\u00a0\u00a0.form-contact__text { ... }\n<\/pre><\/div>\n\n\n
    Gestione degli elementi annidati<\/h2>\n\n\n\n
    Nella scelta dei nomi dei selettori, dobbiamo fare sempre riferimento al Blocco<\/em><\/strong> senza seguire necessariamente la struttura del DOM. Cos\u00ec facendo, possiamo spostare gli elementi a piacimento all\u2019interno del blocco, senza dover riscrivere il codice di volta in volta. Il seguente \u00e8 un esempio da non seguire:<\/span><\/p>\n\n\n
    \n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__header__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n\u00a0\u00a0\n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0<h1 class="block__header__title">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__header__title__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n<\/pre><\/div>\n\n
    \n.block { ... }\n.block__header { ... }\n.block__header__title { ... }\n.block__header__title__strong { ... }\n<\/pre><\/div>\n\n\n
    Questo invece \u00e8 l\u2019approccio corretto:<\/p>\n\n\n
    \n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World!<\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n<\/pre><\/div>\n\n
    \n\/* CSS *\/\n.block { ... }\n.block__header { ... }\n.block__title { ... }\n.block__strong { ... }\n<\/pre><\/div>\n\n\n
    Come usarlo con SASS<\/h2>\n\n\n\n
    Utilizzare BEM in accoppiata con SASS \u00e8 davvero fantastico, perch\u00e9, grazie all\u2019utilizzo del Nesting e della direttiva &<\/strong> che ci permette di ottenere un\u2019interpolazione con il nome del blocco, abbiamo la possibilit\u00e0 di realizzare dei componenti che potrebbero essere spostati facilmente da un progetto all\u2019altro senza grossi problemi. Guardiamo un classico esempio di un pulsante stilizzato:<\/p>\n\n\n
    \n\/* SCSS *\/\n\u00a0\u00a0\n.btn {\n\u00a0\u00a0\u00a0\u00a0background: black;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&__label {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: white;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&#{&}--red {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: red;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0&#{&}--blue {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: blue;\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    In questo caso, oltre alla direttiva &<\/strong> che abbiamo usato per definire i selettori degli elementi, utilizziamo anche la direttiva #{&}<\/strong> che ci permette di creare una ulteriore interpolazione del nome del blocco. Il CSS compilato sar\u00e0 quindi il seguente:<\/p>\n\n\n
    \n\/* CSS compilato *\/\n.btn {\n\u00a0\u00a0\u00a0\u00a0background: black;\n\u00a0\u00a0}\n\u00a0\u00a0.btn__label {\n\u00a0\u00a0\u00a0\u00a0color: white;\n\u00a0\u00a0}\n\u00a0\u00a0.btn.btn--red {\n\u00a0\u00a0\u00a0\u00a0background: red;\n\u00a0\u00a0}\n\u00a0\u00a0.btn.btn--blue {\n\u00a0\u00a0\u00a0\u00a0background: blue;\n}\n<\/pre><\/div>\n\n\n
    Inoltre, possiamo dividere ulteriormente il nostro SCSS<\/strong> in tanti file per poi includere il tutto in un unico foglio di stile attraverso la direttiva @import <\/strong>di SASS. Avremo quindi una struttura del genere:<\/p>\n\n\n
    \nwebsite \/\n\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 scss \/\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 style.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _header.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _footer.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _button.scss\n\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500\n\u00a0\u00a0\n\u00a0\u00a0\nSTYLE.SCSS\n\u00a0\u00a0\u00a0\u00a0@import header;\n\u00a0\u00a0\u00a0\u00a0@import footer;\n    @import button;\n<\/pre><\/div>\n\n\n
    Come usarlo con Bootstrap?<\/h2>\n\n\n\n
    Anche se la tendenza degli ultimi anni \u00e8 quella di utilizzare delle soluzioni frameworkless<\/em>, Bootstrap \u00e8 ancora uno degli strumenti pi\u00f9 utilizzati, allora come facciamo a utilizzarlo con BEM?<\/p>\n\n\n\n
    Possiamo procedere in questo modo: non definiremo le dimensioni dei blocchi, al massimo possiamo definire solo l\u2019altezza, in questo caso dobbiamo astrarre la griglia dai componenti e dobbiamo evitare di aggiungere delle classi alle colonne di Bootstrap. Ecco un esempio pratico:<\/p>\n\n\n
    \n<div class="row">\n\u00a0\u00a0\u00a0<div class="col-md-6">\n\u00a0\u00a0\u00a0\u00a0<div class="block">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/header>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="col-md-6">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class="block">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/header>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
    Disaccoppiando i componenti dalla griglia abbiamo la possibilit\u00e0 in futuro di sostituire Bootstrap con un altro framework o con CSS grid (di cui parleremo nel prossimo articolo)<\/p>\n\n\n\n
    Quali sono i vantaggi<\/h2>\n\n\n\n
    • Maggiore manutenibilit\u00e0 del codice;<\/li>
    • Possibilit\u00e0 di creare dei componenti riutilizzabili in altri progetti;<\/li>
    • Ottimizzazione delle prestazioni: evitando l\u2019utilizzo dei selettori di discendenza e assegnando una classe su ciascun elemento, non costringiamo il browser a fare troppi calcoli.<\/li><\/ul>\n\n\n\n
      Quali sono gli svantaggi<\/h2>\n\n\n\n
      Ovviamente non \u00e8 tutto oro quello che luccica: nel mondo reale talvolta ci toccher\u00e0 scendere anche a compromessi con la metodologia BEM. Soprattutto quando dobbiamo fare molti reset sugli elementi, infatti, i selettori potrebbero essere molto verbosi, come nel caso in cui avessimo dei Blocchi con dei Modificatori e con degli Elementi che a loro volta presentano altri Modificatori. Ad esempio, lo stesso pulsante in alcune pagine potrebbe presentare l\u2019ombra mentre in altre no: per evitare quindi di applicare ulteriori Modificatori all\u2019elemento, ho cercato di ovviare attraverso tre strade percorribili.<\/p>\n\n\n\n
      Nella prima, il pulsante potrebbe essere definito come Blocco, e in casi estremi, al posto del modificatore andremo a utilizzare un elemento, cos\u00ec da sfruttare il selettore .activity-main__btn<\/strong> per ottenere delle personalizzazioni specifiche come l\u2019applicazione dell\u2019ombra.<\/p>\n\n\n
      \n<div class="activity-main activity-main--white">\n       <button type="button" class="btn-main btn--red activity-main__btn"><\/button>\n<\/div>\n<\/pre><\/div>\n\n\n
      Una seconda strada potrebbe essere quella di utilizzare le classi \u201chelpers\u201d (per intenderci, quelle che descrivono le propriet\u00e0 che vanno ad applicare), ovviamente senza esagerare, quindi otterremo una markup del genere<\/p>\n\n\n
      \n<div class="activity-main activity-main--white">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn-main btn--red shadow"><\/button>\n<\/div>\n<\/pre><\/div>\n\n\n
      L\u2019ultima opzione sarebbe quella di andare dal designer e dirgli che il suo pulsante dovrebbe essere coerente con gli altri presenti sul sito ed evitare del tutto questo problema\u2026 ma questa \u00e8 un\u2019altra storia.<\/p>\n\n\n\n
      Best practices<\/h2>\n\n\n\n
      In teoria: non si potrebbero spostare gli elementi da un blocco all\u2019altro, perci\u00f2 a inizio progetto sarebbe buona norma creare una buona styleguide<\/em> in modo da determinare tutti i blocchi, gli elementi e i modificatori.<\/p>\n\n\n\n
      In pratica: se ci chiedono le classiche modifiche dell\u2019ultimo minuto (il venerd\u00ec sera o 5 minuti prima di andare in ferie) possiamo tranquillamente spostare un elemento da un blocco all\u2019altro senza aver paura di trovarlo stilizzato in maniera totalmente diversa, per poi successivamente andare a ottimizzare anche il codice.<\/p>\n\n\n\n
      I nomi dei selettori potrebbero apparire molto frammentati a causa dell\u2019utilizzo di trattini e underscore, a questa problematica possiamo ovviare utilizzando il camel case Quindi un .activity-main__title<\/strong> potrebbe diventare .activityMain__title<\/strong><\/p>\n\n\n\n
      Nel prossimo articolo parler\u00f2 di CSS grid e vedremo insieme come utilizzarlo in accoppiata alla metodologia BEM.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
      Vediamo come semplificare la creazione di CSS con la metodologia BEM<\/p>\n","protected":false},"author":196716237,"featured_media":28315,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637455],"class_list":["post-28314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-css"],"yoast_head":"\nSemplifichiamo i CSS con BEM - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Semplifichiamo i CSS con BEM - Blexin\" \/>\n<meta property=\"og:description\" content=\"Vediamo come semplificare la creazione di CSS con la metodologia BEM\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-03T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carmine Alfano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carmine Alfano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/\"},\"author\":{\"name\":\"Carmine Alfano\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"headline\":\"Semplifichiamo i CSS con BEM\",\"datePublished\":\"2019-09-03T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/\"},\"wordCount\":1204,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/\",\"name\":\"Semplifichiamo i CSS con BEM - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-09-03T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/semplifichiamo-i-css-con-bem\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Semplifichiamo i CSS con BEM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\",\"name\":\"Carmine Alfano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"caption\":\"Carmine Alfano\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/razzullo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Semplifichiamo i CSS con BEM - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/","og_locale":"it_IT","og_type":"article","og_title":"Semplifichiamo i CSS con BEM - Blexin","og_description":"Vediamo come semplificare la creazione di CSS con la metodologia BEM","og_url":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/","og_site_name":"Blexin","article_published_time":"2019-09-03T22:00:00+00:00","article_modified_time":"2021-01-13T08:40:28+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Carmine Alfano","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Carmine Alfano","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/"},"author":{"name":"Carmine Alfano","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"headline":"Semplifichiamo i CSS con BEM","datePublished":"2019-09-03T22:00:00+00:00","dateModified":"2021-01-13T08:40:28+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/"},"wordCount":1204,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","keywords":["CSS"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/","url":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/","name":"Semplifichiamo i CSS con BEM - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","datePublished":"2019-09-03T22:00:00+00:00","dateModified":"2021-01-13T08:40:28+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/semplifichiamo-i-css-con-bem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Semplifichiamo i CSS con BEM"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6","name":"Carmine Alfano","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","caption":"Carmine Alfano"},"url":"https:\/\/blexin.com\/it\/author\/razzullo\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7mG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716237"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=28314"}],"version-history":[{"count":11,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28314\/revisions"}],"predecessor-version":[{"id":28332,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28314\/revisions\/28332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/28315"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=28314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=28314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=28314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}