L'HTML è al centro del web. A volte, nella ricerca di rendere le cose bellissime con i CSS, ci dimentichiamo di questo. Se hai mai usato Sass (o un compilatore CSS in generale), probabilmente hai visto rompere gli stili del tuo sito a causa di un errore di compilazione. Ma prima di affrettarti a correggere l'errore che hai appena introdotto, prendi questa come un'opportunità per analizzare e migliorare il nucleo del tuo sito: l'HTML.
"Il fallimento è semplicemente l'opportunità di ricominciare, questa volta in modo più intelligente." - Henry Ford
Normalmente non sono uno per i cliché motivazionali. Tuttavia, trasformare il fallimento in un'opportunità di successo può essere vero quando si lavora con Sass (o con qualsiasi compilatore CSS). Resta con me e ti spiegherò.
Se hai scritto CSS usando Sass, hai senz'altro visto un errore di compilazione. Nella riga di comando, sembra qualcosa del genere:
Errore di sintassi: CSS non valido dopo ".module": previsto "", era ""
A volte potresti non rilevare l'errore nella riga di comando. Tuttavia, si rileverà senza dubbio l'errore quando si passa al browser perché tutto appare danneggiato!
La prima reazione potrebbe essere quella di tornare istantaneamente all'editor di testo, correggere l'errore di sintassi appena introdotto e osservare che tutto torna alla normalità. Ma aspetta un attimo! Questo potrebbe essere uno di quei momenti di "svolta senza svolta in un'opportunità".
La rottura di Sass può essere una grande opportunità per vedere il tuo sito nudo, completamente svestito. Nessuno stile, solo puro, non colorato HTML, l'essenza del web nel suo nucleo. Vedete, quando il browser fa una richiesta, generalmente torna indietro .html
un ipertesto puro e puro, e basta. Tutto il resto (cioè CSS e Javascript) è un miglioramento. Come afferma Jeremy Keith,
"Ogni riga di CSS che scrivi è un suggerimento. Non stai dettando come dovrebbe essere reso l'HTML; stai suggerendo come dovrebbe essere reso l'HTML. Trovo che sia un'idea molto liberatoria e autorevole. "
Le regole di stile CSS sono alcuni dei primi miglioramenti applicati a un documento HTML e agiscono come suggerimenti, non comandi, per come dovrebbe apparire la pagina. Vedere questi stili interrotti può essere un'opportunità per fermarsi e analizzare il nucleo della tua pagina web, l'HTML, e migliorarlo se necessario. L'HTML è un formato a lungo termine che esiste da un po 'di tempo. Non solo il primo sito web funziona ancora, è anche reattivo!
Come ha detto Ian Yates,
"Tutti i siti web sono responsive per impostazione predefinita, fino a quando non iniziamo ad aggiungere stili e ad infrangerli."
Quando guardi il puro HTML della tua pagina, poni domande come:
per elenchi non ordinati di elementi, ma a
quando si definiscono le relazioni tra gli elementi?
e
dove appropriato, piuttosto che tag generici come
?Ho un'idea: che ne pensi di testare questo sulla tua pagina web esistente in questo momento? Vai al tuo sito, apri gli strumenti per sviluppatori, trova il .css
file utilizzato dal sito e rimuovere tutte le regole di stile.
ManciaIn alternativa, estensioni come il plug-in Web Developer per Chrome ti consentono di attivare facilmente gli stili CSS.
Guarda quello! Nel mio sito ho trovato margini di miglioramento. Ci sono alcuni elementi HTML che non sono essenziali senza JavaScript. Dovrei rimuovere quelli in modo che non siano inizialmente presenti nel DOM e aggiungerli in seguito con JavaScript come miglioramenti. Inoltre, alcuni componenti dell'elenco potrebbero essere ottimizzati e unificati in semantica. Ma questo non riguarda me, torniamo a parlare il tuo sito web.
Scorri la pagina "nuda" e prova a leggere il contenuto. Ha senso? Le cose dovrebbero essere intestate come titoli? Le cose dovrebbero essere elenchi di elenchi? In caso contrario, rivalutare il markup. L'HTML è ciò che costituisce il tuo sito web al suo livello più elementare. Justin Jackson ha un grande esempio di questo. Una volta che hai un solido codice HTML semantico per iniziare, puoi essere certo che anche se sulla tua pagina non viene caricato nient'altro che l'HTML, gli utenti possono comunque leggere e comprendere il tuo messaggio (anche i motori di ricerca).
Il contenuto accessibile universalmente è un tenant principale del Web ed è sempre un ottimo punto di partenza. Parlando nel 2004 di questo approccio semantico accessibile al web design, ha affermato Jeffery Veen,
"[Consegno] soluzioni ai miei clienti che sono molto meno complesse da implementare, sono molto più facili da mantenere, costano in modo esponenziale meno da servire, funzionano su più browser e dispositivi, fanno molto meglio nella lotteria dei motori di ricerca, e - ovviamente - sono accessibili a tutti ... a tutti ... usando il Web oggi. E prova a discutere con il valore aziendale di quello. Ed è per questo che non mi interessa dell'accessibilità. Perché quando il Web design è praticato come un mestiere, e non una consolazione, l'accessibilità è gratuita. "
Quindi la prossima volta che modifichi il CSS del tuo sito con Sass e ottieni un errore di compilazione, prendilo come un'opportunità per esaminare il contenuto e la struttura reali del tuo sito: l'HTML. Potrebbe essere uno di quei momenti in cui un fallimento finisce per prestarsi a una vera opportunità di arricchimento che altrimenti sarebbe mancato.