Share
In questo tutorial impareremo come utilizzare PostCSS per rendere lo sviluppo di CSS stile BEM / SUIT più semplice ed efficiente.
Queste due metodologie definiscono una convenzione di denominazione per le classi che rende più semplice mantenere i tuoi stili strettamente orientati alla funzione e aiuta gli altri sviluppatori a riconoscere lo scopo delle varie classi solo dal loro nome.
BEM è stato il precursore di questo tipo di metodologia di denominazione delle classi, creata da Yandex. La metodologia SUIT è un approccio basato su BEM, ma con alcune modifiche e aggiunte apportate da Nicholas Gallagher. SUIT fa tutto ciò che fa BEM, ma per molti utenti è considerato un miglioramento.
Lavorare con questi metodi aiuta sicuramente a produrre CSS migliori e più ben strutturati. Tuttavia, la parte difficile è che può diventare stancante digitare manualmente i nomi di classe richiesti in questa struttura e tenere traccia di come le classi interagiscono può diventare un po 'di mal di testa.
Il plugin postcss-bem di Malte-Maurice Dreyer allevia questi problemi attraverso una combinazione di scorciatoie e nidificazione, che imparerai a usare mentre ci spostiamo attraverso questo tutorial.
Ma prima, abbiamo un veloce primer sui metodi BEM e SUIT, per assicurarci di avere una visione chiara dei vantaggi dell'uso del plugin postcss-bem e del modo in cui viene utilizzato.
In BEM blocchi sono pezzi di alto livello di un design; i blocchi di costruzione del sito sono fatti da. Un blocco dovrebbe essere un pezzo del tuo sito che è indipendente da altri pezzi e potrebbe teoricamente essere posizionato ovunque nel tuo layout, anche annidato all'interno di un altro blocco.
Ad esempio, il modulo di ricerca "blocchi" sul tuo sito potrebbe utilizzare la classe .Formulario di ricerca.
Un elemento in BEM è una sottosezione all'interno di un blocco. Sono indicati aggiungendo un trattino basso __ separatore e un nome di elemento al nome del blocco genitore.
Ad esempio, un modulo di ricerca potrebbe includere l'intestazione, il campo di testo e gli elementi del pulsante di invio. I loro nomi di classe potrebbero essere .Ricerca-form__heading, .Ricerca-form__text-campo e .Ricerca-form__submit-button rispettivamente.
UN modificatore viene applicato a un blocco o elemento per indicare una modifica nella sua presentazione o un cambiamento nel suo stato. Sono indicati aggiungendo un separatore e un nome modificatore al blocco o all'elemento in questione.
I documenti ufficiali del sito BEM indicano che i separatori dei modificatori devono essere un trattino di sottolineatura singolo _. Tuttavia la convenzione "BEM-like" delle linee guida CSS di Harry Roberts impiega due trattini -- ed è probabilmente più ampiamente usato e conosciuto rispetto alla convenzione BEM ufficiale.
Ad esempio, in un disegno si potrebbe desiderare di presentare forme di ricerca avanzate in modo diverso rispetto ai normali moduli di ricerca, e quindi creare la classe modificatore .Ricerca-form_advanced (BEM ufficiale) o .Formulario di ricerca - advanced (BEM-like).
In un altro esempio, è possibile modificare l'aspetto del modulo a causa di un cambiamento di stato, ad esempio se è stato appena inviato un contenuto non valido e quindi creare il modificatore .Ricerca-form_invalid (BEM ufficiale) o .Formulario di ricerca - non valida (BEM-like).
SUIT comprende Utilità e componenti. All'interno dei componenti ci può essere modificatori, discendenti e stati.
SUIT utilizza una combinazione di caso pascal (PascalCase), caso cammello (camelCase) e trattini. Le sue convenzioni impongono un limite al numero a volte confuso di trattini e trattini bassi che possono apparire in BEM. Ad esempio, la classe BEM .Ricerca-form__text-campo sarebbe .SearchForm-textField in SUIT.
Utilità gestire la struttura e lo stile posizionale e sono scritti in modo tale che possano essere applicati ovunque in un componente. Sono preceduti da u- e scritto in caso di cammello. Per esempio, .u-clearfix.
UN componente in SUIT prende il posto di a bloccare in BEM. I componenti sono sempre scritti in caratteri pascal e sono solo parte di un SUIT che utilizza il caso pascal, rendendoli facili da identificare. Per esempio, .SearchForm.
I componenti possono essere opzionalmente preceduti da un namespace e un trattino singolo NMSP- per garantire che i conflitti siano evitati, ad es. .mine-SearchForm.
UN discendente in SUIT sostituisce un elemento in BEM. Usa un singolo trattino - ed è scritto in caso di cammello. Per esempio .SearchForm-rubrica, .SearchForm-textField e .SearchForm-submitButto.
SUIT utilizza modificatori come fa BEM, tuttavia il loro ruolo è più strettamente controllato. Un modificatore SUIT è generalmente applicato solo a un componente, non a un discendente. Non dovrebbe inoltre essere utilizzato per rappresentare cambiamenti di stato, in quanto SUIT ha una convenzione di denominazione dedicata per gli stati.
I modificatori sono scritti in caso cammello e sono preceduti da due trattini --. Per esempio, .SearchForm - advanced.
Stato le classi possono essere utilizzate per riflettere le modifiche allo stato di un componente. Ciò consente loro di essere chiaramente differenziati dai modificatori, che riflettono la modifica dell'aspetto di base di un componente indipendentemente dallo stato. Se necessario, uno stato può anche essere applicato a un discendente.
Gli stati hanno il prefisso è- e sono scritti in custodia di cammello. Inoltre sono sempre scritti come classi adiacenti. Per esempio .SearchForm.is-non valida.
Ora che hai gli elementi essenziali di BEM e SUIT verso il basso, è il momento di impostare il tuo progetto.
Avrai bisogno di un progetto vuoto usando Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini, quindi dovresti trovare un po 'più semplice lavorare con.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
rispettivamente.
Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota. Quindi con un terminale o un prompt dei comandi puntato verso la cartella esegui il comando installazione di npm.
Successivamente, dovrai installare il plugin postcss-bem. Installeremo anche un plugin che può funzionare abbastanza bene: postcss-nested.
Sia che tu stia usando Gulp o Grunt, esegui il seguente comando all'interno della cartella del tuo progetto:
npm install postcss-bem postcss-nested --save-dev
Ora siamo pronti per caricare i plugin nel tuo progetto.
Se stai usando Gulp, aggiungi queste variabili sotto le variabili già presenti nel file:
Accentsconagua
var bem = require ('postcss-bem'); var nested = require ('postcss-nested');Ora aggiungi ognuno di questi nuovi nomi di variabili nel tuo processori array:
var processors = [bem, nested];
Fai un rapido test per verificare che tutto funzioni eseguendo il comando gulp css quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:
processori: [require ('postcss-bem') (), require ('postcss-nested') ()]Fai un rapido test per verificare che tutto funzioni eseguendo il comando grunt postcss quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Ok, sei pronto per andare. Impariamo come generare la struttura BEM e SUIT.
Può esserci qualche ingombrante sviluppo nella struttura BEM o SUIT quando si scrive codice manualmente, poiché la ripetizione continua degli stessi identificatori nei nomi delle classi può diventare noiosa e tenere traccia di quali elementi e discendenti appartengono a quali blocchi e componenti possono creare confusione.
Tuttavia, quando usi postcss-bem, diventa facile dare un senso alla struttura del tuo codice a colpo d'occhio e la ripetizione nel digitare i nomi delle classi diventa praticamente inesistente.
Nonostante il suo nome, per impostazione predefinita postcss-bem verrà emesso in base alla sintassi SUIT anziché a BEM. Puoi eseguire l'output in sintassi BEM, che tratteremo in seguito, ma il plugin è progettato principalmente per generare SUIT, quindi per questo motivo inizieremo con la sintassi di SUIT.
Per creare un componente, utilizzare la sintassi @component ComponentName ....
Prova questo aggiungendo un SearchForm componente al tuo file "src / style.css":
@Component SearchForm padding: 0; margine: 0;
Compilalo e il tuo codice risultante dovrebbe essere:
.SearchForm padding: 0; margine: 0;
Per creare un discendente, usa la sintassi @descendent descName ... nidificato all'interno del componente principale.
Aggiungi un nome discendente campo di testo dentro il tuo SearchForm componente come così:
@Component SearchForm padding: 0; margine: 0; / * Nest discendente sotto il componente * / @descendent textField border: 1px solid #ccc;
Dopo la compilazione, ora dovresti vedere:
.SearchForm padding: 0; margine: 0; .SearchForm-textField border: 1px solid #ccc;
Creare un modificatore per un componente con la sintassi @modificatore nome ..., nidificato all'interno del componente che effettua. Generalmente i modificatori devono essere posizionati nella parte superiore del componente, al di sopra di eventuali discendenti e stati.
Aggiungi un modificatore chiamato Avanzate alla tua SearchForm componente con il seguente codice:
@Component SearchForm padding: 0; margine: 0; / * In genere, posiziona i modificatori sopra i discendenti * / @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc;
Ricompila il codice e dovresti vedere il tuo nuovo Avanzate modificatore di componenti:
.SearchForm padding: 0; margine: 0; . SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc;
Gli stati sono creati tramite la sintassi @quando il nome ... e può essere annidato all'interno di un componente o di un discendente.
Aggiungi uno stato chiamato non valido alla tua campo di testo discendente usando questo codice:
@Component SearchForm padding: 0; margine: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; / * Questo crea uno stato per il discendente TextField * / @when invalid border: 1px solid red;
Ora quando compili il tuo codice vedrai che contiene il tuo nuovo non valido stato:
.SearchForm padding: 0; margine: 0; . SearchForm - advanced padding: 1rem; .SearchForm-textField border: 1px solid #ccc; .SearchForm-textField.is-invalid border: 1px rosso fisso;
Puoi assegnare uno spazio dei nomi ai componenti e tutti i discendenti, i modificatori e gli stati annidati al loro interno, circondandoli con @ nome del namespace del componente .... Puoi, se vuoi, avvolgere l'intero foglio di stile con questo spazio dei nomi in modo tale che a tutte le classi venga automaticamente aggiunto il prefisso.
Provalo completando tutto il tuo codice finora @ component-namespace mine ...:
@ component-namespace mine @component SearchForm padding: 0; margine: 0; @modifier advanced padding: 1rem; @descendent textField border: 1px solid #ccc; @quando non valido border: 1px rosso fisso;
Dopo la compilazione, vedrai che ora tutti i tuoi componenti hanno il prefisso il mio-:
.mine-SearchForm padding: 0; margine: 0; .mine-SearchForm - advanced padding: 1rem; .mine-SearchForm-textField border: 1px solid #ccc; .mine-SearchForm-textField.is-invalid border: 1px rosso fisso;
Le utilità sono create con la sintassi @utility utilityName .... Ricorderai che quando hai impostato il tuo progetto, hai installato il plug-nested postcss. Lo abbiamo fatto perché può essere molto comodo da usare all'unisono con postcss-bem, come vedremo in questo esempio in cui creiamo un clearfix utilità:
@utility clearFix &: before, &: after content: ""; display: tabella; &: after clear: both; / * Se supporta IE 6/7 * / * zoom: 1;
Dopo aver aggiunto il codice sopra, compila e vedrai che questa nuova utility è stata creata:
.u-clearFix / * Se supporta IE 6/7 * / zoom: 1; .u-clearFix: before, .u-clearFix: after content: ""; display: tabella; .u-clearFix: after clear: both;
Per attivare l'output della sintassi BEM in postcss-bem, passare l'opzione stile: 'bem' nel tuo Gulpfile o Gruntfile in questo modo:
/ * Gulpfile * / var processors = [bem (style: 'bem'), nidificato]; / * Gruntfile * / processori: [require ('postcss-bem') (style: 'bem'), require ('postcss-nested') ()]Di default postcss-bem userà il separatore ufficiale per un modificatore di un singolo carattere di sottolineatura _. Se è importante per il tuo progetto che usi il separatore più comune di due trattini -- invece, puoi cambiare la configurazione del plugin postcss-bem andando nella cartella node_modules / postcss-bem del tuo progetto, aprendo index.js, localizzando la riga 15 e modificando questo:
bem: separators: namespace: '-', descendent: '__', modificatore: '_'
… a questo:
bem: separators: namespace: '_', descendent: '__', modificatore: '-'
Poiché un "blocco" in BEM è correlato a un "componente" in SUIT, utilizza la sintassi @component block-name ... per generare un blocco.
Per creare un Formulario di ricerca blocco aggiungi questo codice:
@component search-form padding: 0; margine: 0;
Quindi compila e dovresti vedere:
.forma di ricerca padding: 0; margine: 0;
Poiché un "elemento" in BEM è correlato a un "discendente" in SUIT, possono essere creati con la sintassi @descendent nome-elemento ... nidificato all'interno del blocco genitore.
Per creare un campo di testo elemento aggiungere il seguente:
@component search-form padding: 0; margine: 0; @descendent text-field border: 1px solid #ccc;
Durante la compilazione, vedrai che il tuo nuovo elemento è stato creato:
.forma di ricerca padding: 0; margine: 0; .search-form__text-field border: 1px solid #ccc;
Anche se BEM consente i modificatori sia per i blocchi che per gli elementi, il plugin postcss-bem li elaborerà solo se nidificati all'interno di blocchi e non di elementi, a causa della convenzione SUIT dei modificatori applicata ai componenti non discendenti. Possono essere creati con la sintassi @modificatore nome ..., nidificato all'interno del suo blocco principale.
Aggiungi un Avanzate modificatore al tuo Formulario di ricerca componente come così:
@component search-form padding: 0; margine: 0; @modifier advanced padding: 1rem; @descendent text-field border: 1px solid #ccc;
E sulla compilazione produrrà:
.forma di ricerca padding: 0; margine: 0; .search-form_advanced padding: 1rem; .search-form__text-field border: 1px solid #ccc;
Mentre sei in modalità BEM, il @utilità e @quando le sintassi non si compileranno in nulla, dato che BEM non usa utilità o stati.
Tuttavia, anche se generalmente non fa parte del BEM, il @ Componente namespace la sintassi funzionerà ancora se desideri utilizzarla nel tuo foglio di stile BEM. Conterrà come prefisso le tue lezioni nome--:
.mine - forma di ricerca padding: 0; margine: 0; .mine - search-form_advanced padding: 1rem; .mine - search-form__text-field border: 1px solid #ccc;
Ora sai tutto su come abbreviare il tuo sviluppo BEM e SUIT, e rendere il processo complessivo più facile. Riassumiamo tutto ciò che abbiamo trattato:
@componente, @descendent, @modificatore eccetera.@ nome del namespace del componente ... In seguito, guardiamo un altro ottimo modo per trarre vantaggio da PostCSS, e cioè mettendo insieme un toolkit di stenografia e scorciatoie che possiamo fare per rendere la nostra codifica più veloce ed efficiente.
Ci vediamo lì!
