Riprendiamo il viaggio nelle best-practice nell'utilizzo di CSS e HTML introducendo un metodo di scrittura per il CSS che ci tornerà utile per la creazione di regole riguardanti i vari stili che gli elementi HTML dovranno avere sulla pagina.
Questo standard prende il nome di BEM (Block Element Modifier) e basa i suoi principi sul riconoscimento della zona (blocco) di pagina in cui l'elemento andrà a inserirsi e le varie modifiche che potrà avere.
In linea di massima possiamo identificare delle zone HTML comuni, come header, content, nav, footer o definirne di proprie come una sezione carrello all'interno di un sito di ecommerce. Nel blocco troviamo vari elementi come liste, bottoni, labels, paragrafi che possono variare il proprio aspetto a seconda delle azioni dell'utente o allo stato della pagina.
Immaginiamo quindi di definire degli stili per il bottone di checkout del blocco cart.
/* regole comuni */ .cart__checkout{ margin: 0; padding: 5px 10px; background-color: blue; } /* bottone rosso */ .cart__checkout--red{ background-color: red; } /* bottone verde */ .cart__checkout--green{ background-color: green; }
La sintassi BEM richiede una scrittura del tipo Blocco__Elemento--Modificatore il che rende molto più capibile il contesto di utilizzo di ogni singola classe.
Se scrivendo CSS questa sintassi potrebbe risultare prolissa, con l'utilizzo di un precompilatore SCSS troviamo invece enormi vantaggi, in quanto il codice risulterà molto più leggibile. In questo caso possiamo utilizzare diverse metodologie di scrittura: la prima consiste nell'estendere il modificatore utilizzando la classe base, la seconda crea invece la stessa struttura che avremmo se scrivessimo in CSS.
/* Prima sintassi */ /* regole comuni */ .cart__checkout{ margin: 0; padding: 5px 10px; background-color: blue; } /* bottone rosso */ .cart__checkout--red{ @extend .cart__checkout; background-color: red; } /* bottone verde */ .cart__checkout--green{ @extend .cart__checkout; background-color: green; } /* Seconda sintassi */ .cart__checkout{ margin: 0; padding: 5px 10px; background-color: blue; &--red{ background-color: red; } &--green{ background-color: green; } }
Nel primo snippet si potrà utilizzare solo la classe modificatore per avere tutti gli stili applicati, nel secondo dovremmo invece specificare la classe base per poi applicare il modificatore.
<!-- prima sintassi --> <button class="cart__checkout--red">Checkout</button> <!-- secondsa sintassi --> <button class="cart__checkout cart__checkout--red">Checkout</button>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Criptare la comunicazione con mTLS in Azure Container Apps
Gestione degli environment per il deploy con un workflow di GitHub
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Configurare policy CORS in Azure Container Apps
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Effettuare il binding di date in Blazor
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Sottoscrizione agli eventi sul contenitore in JavaScript
Eseguire una GroupBy per entity in Entity Framework
Workflow di continuous deployment tramite pull request label in GitHub
Short-circuiting della Pipeline in ASP.NET Core
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10