Share
"Moduli CSS" non ha nulla a che fare con il W3C, piuttosto parte di un processo di costruzione suggerito. Compila il tuo progetto, rinominando i selettori e le classi in modo che diventino unici, mirati ai singoli componenti. Gli stili sono bloccati in quei componenti e non possono essere usati altrove a meno che tu non lo dica esplicitamente!
Al giorno d'oggi siamo abbastanza abituati all'idea che le tecnologie web siano la forza trainante delle app; app Web, app mobili e desktop. Ma a differenza dei semplici siti web statici, le app sono in genere più dinamiche, complesse e spesso sono costituite da componenti anche al di là di ciò che offre Bootstrap o ZURB Foundation. Con l'aumentare della complessità dell'app, la gestione dei CSS può essere un compito infernale.
Nel corso del tempo, sono state sviluppate una miriade di strategie, come OOCSS, ITCSS, BEM, Atomic CSS, ecc. Per mantenere i CSS organizzati, riutilizzabili e (in modo cruciale) scalabile. Queste strategie richiedono che tu e tutti i membri del team seguiate diligentemente le convenzioni.
Tuttavia, prima o poi, la complessità si insinuerà di nuovo e incontrerai regole di stile come le seguenti:
html.progressive-image.js [data-progressive-image], html.progressive-image.js [data-progressive-image] * background-image: none! important; immagine-maschera: nessuna! importante; opacità: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transform: translate (0, 0)! important
Il problema con i CSS su molti siti Web e app su larga scala è che è così difficile mantenere la specificità bassa che, ad un certo punto, aggiungendo !importante non può essere evitato. Inoltre, il refactoring dei CSS su una base di codice estesa è complicato in quanto la rimozione di stili potrebbe danneggiare altri componenti.
In questo tutorial, esamineremo i "Moduli CSS" e come può aiutarci a ridurre questi famigerati problemi CSS.
Nota: controlla il repository su Github per supportare esempi di codice.
In breve, "Moduli CSS" è uno strumento che rinomina le classi CSS e gli ID in selettori unici, consentendo di isolare le regole di stile localmente agli elementi o ai componenti assegnati. Supponendo che abbiamo un pulsante, potremmo in genere scrivere le sue regole di stile come segue:
.button background-color: # 9b4dca; border: 0.1rem solid # 9b4dca; border-radius: .4rem; colore: #fff; cursore: puntatore; display: blocco in linea; .button: focus, .button: hover background-color: # 606c76; border-color: # 606c76; colore: #fff; contorni: 0;
Con i moduli CSS queste regole di stile verranno rinominate in qualcosa di simile:
._12We30_button background-color: # 9b4dca; border: 0.1rem solid # 9b4dca; border-radius: .4rem; colore: #fff; cursore: puntatore; display: blocco in linea; ._12We30_button: focus, ._12We30_button: hover background-color: # 606c76; border-color: # 606c76; colore: #fff; contorni: 0;
Se dai siti di grandi dimensioni come Facebook, Instagram o Airbnb tramite DevTools del tuo browser, scoprirai che le classi CSS e gli ID sono nominati proprio con questo tipo di pattern. Ecco un esempio dalla homepage di Airbnb:
Chi ha chiamato la classe con numeri apparentemente casuali?Usare i moduli CSS non ha molto senso se abbiamo un solo componente, quindi espandiamo il nostro esempio a tre componenti e vediamo come configurare il nostro progetto per implementare i moduli CSS.
In questo secondo esempio, costruiremo tre componenti; un pulsante con tre stili diversi. Li chiameremo "pulsante principale", "pulsante di contorno" (noto anche come "pulsante fantasma") e "pulsante di cancellazione". Inseriremo questi pulsanti in una directory separata. Ogni directory conterrà index.css e index.js.
Nel index.js, creiamo l'elemento e assegniamo le classi all'elemento, come segue:
// 1. Importa gli stili dal file index.css. importare stili da './index.css'; / ** * 2. Creazione di un elemento del pulsante e aggiunta della classe da index.css. * @type String * / const button = ''; // 3. Esportare il pulsante da utilizzare negli altri file. esporta pulsante predefinito;
Usando il nuovo importare direttiva in ES6, importiamo il foglio di stile e leggiamo le classi e gli ID come oggetto JavaScript. Quindi creiamo un elemento e aggiungiamo la classe chiamata .pulsante utilizzando il JavaScript Templating nativo che è stato introdotto anche in ES6. Infine, esportiamo il nostro elemento in modo che l'elemento possa anche essere importato e riutilizzato negli altri file JavaScript.
Al momento della stesura di questo documento, non tutti i browser hanno implementato le funzionalità JavaScript e la sintassi più recenti dalle specifiche ES6. Pertanto, avremo bisogno di Babel per trasformare quei frammenti in sintassi JavaScript che è compatibile nella maggior parte dei browser.
Il nostro foglio di stile, index.css, è semplice CSS. Contiene un numero di selettori per lo stile dell'elemento del pulsante.
/ * 1. Pulsante principale * / .button background-color: # 9b4dca; border: 0.1rem solid # 9b4dca; border-radius: .4rem; colore: #fff; cursore: puntatore; display: blocco in linea; font-size: 1.1rem; font-weight: 700; altezza: 3.8rem; letter-spacing: .1rem; line-height: 3.8rem; riempimento: 0 3.0rem; allineamento del testo: centro; decorazione del testo: nessuna; text-transform: maiuscolo; white-space: nowrap; / * Altri stili del pulsante principale qui * /
Uno dei vantaggi dell'utilizzo dei moduli CSS è che non dobbiamo preoccuparci delle convenzioni di denominazione. Puoi ancora utilizzare le tue metodologie CSS preferite come BEM o OOCSS, ma nulla viene applicato; puoi scrivere le regole di stile nel modo più pratico per il componente poiché il nome della classe sarà alla fine namespace.
In questo esempio, chiamiamo tutte le classi del nostro componente pulsante .pulsante invece di .button-primaria o .button-outline.
Lavorando con i CSS all'interno di Shadow DOM ho ancora la vecchia abitudine di usare la notazione BEM anche se non ho * bisogno * di. Incapsulamento di stile FTW!
- Razvan Caliman (@razvancaliman) 31 luglio 2017
Quando carichiamo il index.js su una pagina HTML, nulla apparirà nel browser. In questo caso, dovremo compilare il codice per renderlo funzionale. Avremo bisogno di installare Babel, Babel Preset per ES2015 (ES6) e Webpack insieme ai seguenti cosiddetti "caricatori" per consentire a Webpack di elaborare i nostri file sorgente.
Accentsconagua
.js file e trasformare il codice sorgente con il modulo principale Babel..css File.css-loader nella nostra pagina HTML usando il In Vue, aggiungiamo il modulo attributo al stile elemento, come mostrato sopra, per abilitare i moduli CSS. Quando compileremo questo codice otterremo praticamente lo stesso risultato.
Avvolgendo
Per alcuni di voi, questo sarà qualcosa di completamente nuovo. È perfettamente comprensibile se il concetto di moduli CSS è un po 'un grattacapo a prima vista. Ricapitoliamo cosa abbiamo imparato sui moduli CSS in questo articolo.
- "Moduli CSS" ci consente di incapsulare le regole degli stili rinominando o
namespacing i nomi delle classi, riducendo al minimo lo scontro sulla specificità del selettore man mano che la codebase cresce. - Questo ci consente anche di scrivere i nomi delle classi in modo più confortevole piuttosto che attenerci a una particolare metodologia.
- Infine, poiché le regole di stile sono accoppiate a ciascun componente, gli stili verranno rimossi anche quando non useremo più il componente.
In questo articolo, abbiamo appena scalfito la superficie dei moduli CSS e di altri strumenti moderni di sviluppo web come Babel, Webpack e Vue. Quindi qui ho messo insieme alcuni riferimenti per approfondire questi strumenti.
Ulteriore riferimento
- Guarda la demo su Github
- Inizia la codifica ES6 con Babel: Tuts + Corso
- Inizia con Vue: Tuts + Corso
- Instant Webpack 2: Tuts + Corso
- Strategie per mantenere bassa la specificità CSS
- Daniel Eden: Move Slow and Fix Things
