I framework CSS sono noti per portare un club all'idea di HTML semantico. Questo è un tale problema che gli sviluppatori di tutto il mondo hanno completamente giurato l'idea dei framework basati sulla griglia esclusivamente sul principio che porta a nomi di classi non semantiche.
Con Sass, diventa abbastanza facile aggirare questo problema e utilizzare una griglia predefinita senza ricorrere a nomi di classe imprevedibili. In effetti, l'ultima versione di Sass (3.2) ha una nuova funzionalità che rende questo compito più facile che mai. Continua a leggere per vedere di cosa si tratta e come funziona.
Il problema
Personalmente, mi piace impostare e utilizzare le griglie in CSS. Sono un tipo nerd e analitico di ragazzo, quindi il layout e tutto se le sue complessità (i fastidi) sono letteralmente la cosa che preferisco sui CSS.
Devo ammettere che capisco perfettamente il tuo punto di vista se hai cancellato le griglie. Ecco un esempio del problema, come illustrato dalla griglia di Bootstrap di Twitter:
Idealmente, i nomi delle classi sarebbero limitati a qualcosa che ti dice qualcosa sul flusso della pagina. Potresti avere un? sezione o forse un? copyright? classe. Questi nomi di classe ti dicono a cosa servono pur non essendo così specifici da descrivere la natura di come viene stilizzato l'elemento. Utilizzando questo metodo, l'estetica del design potrebbe cambiare completamente con una riprogettazione, ma i nomi delle classi potrebbero rimanere gli stessi.
Con Bootstrap e altre griglie, però, sei obbligato a inserire tutti questi nomi di classi di griglia che effettivamente comunicano e definiscono il tuo layout in modo molto specifico nel tuo codice HTML. Semantica o no, penso che le griglie siano super divertenti e abbastanza facili da imparare, ma alla fine usiamo le classi in modo diverso rispetto a ciò che è realmente inteso.
"Semantico o no, penso che le griglie siano super divertenti e abbastanza facili da imparare, ma alla fine usiamo le classi in modo diverso rispetto a ciò che è realmente inteso. ?Non sarebbe bello se potessimo avere il meglio di entrambi i mondi? I framework Grid sono estremamente facili da implementare, ma la codifica semantica è senza dubbio il modo migliore per andare nel settore nel suo complesso. È una battaglia classica tra bisogno individuale e bene superiore.
Sass @extend
Quando mettiamo in scena Sass, possiamo davvero avere la nostra torta e mangiarla anche noi. La ragione di questo è l'intero punto di Sass. Dietro le quinte, si arriva a infrangere le regole e fare tutti i tipi di cose pazzesche perché, in definitiva, l'output sarà vanigliato CSS.
La funzione Sass che salva davvero la giornata qui è chiamata @extend, ed è senza dubbio la migliore funzione di Sass (è anche uno dei più grandi motivi che molti utenti di LESS danno e passano a Sass). Sass @extend è una funzione semplice con importanti implicazioni.
Per apprezzare come funziona @extend, passiamo direttamente a un esempio che ho codificato per un precedente tutorial:
Qui abbiamo due classi che essenzialmente hanno bisogno di condividere la maggior parte dei loro stili. Fondamentalmente, la? Risposta? la classe è esattamente come il? commento? classe, solo con testo in corsivo e un colore di sfondo diverso. Per farcela, usiamo semplicemente una dichiarazione @extend all'interno della nostra? Risposta? classe, che punta al nostro? commento? classe.
Questo dice a Sass che quando viene prodotto il CSS, tutti gli stili da? Commentano? dovrebbe essere applicato anche a? risposta.? La parte migliore qui è che Sass è abbastanza intelligente da produrre questo in modo da eliminare la ridondanza:
So cosa stai pensando, perché diamine non abbiamo appena scritto in questo modo in primo luogo? Potremmo assolutamente. Per molti però, il modo Sass è un po 'più lineare e più facile da configurare al volo.
Estendere le classi di griglia
Ora che sappiamo cosa fa @extend, vediamo come possiamo applicarlo a qualche griglia CSS. Diamo un'occhiata a qualche codice di rete liberamente basato su Do not Overthink It Grids di Chris Coyier.
Questo codice è meravigliosamente conciso e molto facile da implementare, ma richiede che applichiamo nomi di classi non semantiche nel nostro CSS (.col-1-2, ecc.). Se ripensiamo a queste idee con @extend, potremmo trovare qualcosa di simile al seguente:
Guai in Paradiso
Come puoi vedere nell'esempio sopra, @extend non è proprio l'eroe che vogliamo che sia in questa situazione. La nostra versione di Sass può fornire nomi di classe semantici per il nostro codice HTML, ma il nostro CSS finale sarà riempito di rigonfiamenti.
Il codice che Sass sputa, anche se più conciso, è ancora riempito con i nostri vari nomi di classi inutilizzati come? Colonna? e? .col-1-3 ?. In realtà, volevamo semplicemente impostare questi modelli come @extend e non abbiamo bisogno o non li vogliamo nel nostro CSS finale.
Selettori segnaposto in Sass 3.2
È qui che entra in gioco Sass 3.2. C'è una nuova funzionalità chiamata? Selettori segnaposto? questo risolverà bene il nostro piccolo problema. I bravi ragazzi di Sass hanno capito che i programmatori spesso impostano una sorta di "classe base"? esisteva solo per il gusto di @extend e creava selettori segnaposto come un modo per incoraggiare questo comportamento senza lo sfortunato effetto collaterale di una classe inutilizzata nel CSS finale.
Nell'esempio qui sotto, possiamo vedere come funziona. Questa volta ho inserito sia l'input Sass che l'output CSS uno accanto all'altro in modo da poter vedere facilmente la trasformazione. Leggi i commenti per vedere quale è quale.
Come puoi vedere, utilizzando un simbolo delle percentuali al posto di un punto, siamo stati in grado di definire? Col-2-3? come un selettore di segnaposto che può essere esteso, ma che non sarà trasferito nel nostro output finale.
Utilizzare i selettori segnaposto nella nostra griglia
Implementiamo questi su larga scala con tutto il codice con cui stavamo lavorando prima. Ecco come potrebbe essere:
Come puoi vedere, ora maggior parte delle nostre classi sono in realtà solo selettori di segnaposto che non verranno esportati nel nostro CSS finale. Questo ci consente di impostare nomi di classi davvero semplici e facili da implementare nel nostro Sass, pur restando fedeli all'output semantico! Finalmente il meglio di entrambi i mondi!
Bad Form Sass
Non così veloce, perché non ho mostrato l'output del codice sopra? Perché, in teoria, dovrebbe essere fantastico. Se tutto andasse bene, l'output sarebbe questo:
Sfortunatamente, Sass ha un po 'di stranezza quando si tratta di usare estensioni multiple. Ecco l'output effettivo:
Se sei astuto, hai già notato i selettori ridondanti sulle linee quattro e undici. Poiché i due estende effettivamente due selettori di segnaposto diversi, Sass li tratta come elementi separati nell'output, anche se potrebbero essere facilmente combinati.
Come puoi immaginare, se il tuo intero sito è stato costruito sulla base di molteplici estensioni e selettori di segnaposto, le ridondanze sarebbero probabilmente abbondanti nell'output finale.
A causa di come funziona la cascata e l'ereditarietà, posso vedere che questo sarebbe un problema davvero complicato da codificare, quindi farò una pausa ai ragazzi di Sass. Tuttavia, spero che questo sia qualcosa che viene affrontato in futuro.
Cosa pensi?
Sass @extend contiene molte promesse per migliorare drasticamente la tua efficienza con i CSS. È anche uno strumento davvero utile se stai cercando di configurare un sistema di griglia semantica, specialmente se combinato con la nuova funzione di selezione segnaposto di Sass 3.2.
Sfortunatamente, come abbiamo visto sopra, ci sono anche degli svantaggi nell'usare questa tecnica. Pensi che i professionisti valgano gli svantaggi? Riesci a pensare a un modo migliore per farlo? Voglio vederlo, quindi lasciatemi un commento.