Sei codificato da un po 'di tempo e sai come orientarti in un file CSS. Non sei certo un maestro, ma con un po 'di giochini puoi arrivare dove vuoi andare. Ti stai chiedendo se non riuscirai mai a superare quel punto in cui i CSS sono una tale lotta. Riuscirai mai a liberarti di un layout complesso senza ricorrere a tentativi ed errori per vedere cosa funziona e cosa no?
La buona notizia è che puoi davvero superare quel punto frustrante in cui conosci abbastanza CSS per codificare un sito web, ma mancano le solide fondamenta che ti permettono di codificare senza il fastidio di non capire esattamente come andrai ad arrivare dove sei tu stiamo andando, e questo punto è molto più vicino di quanto pensi. Propongo che ci siano cinque argomenti che aumenteranno drasticamente la tua comprensione dei CSS. Passa un po 'di tempo a leggere su ciascuna delle prossime ventiquattro ore e cambierai il modo in cui codifichi per sempre.
1. Avvolgi la tua mente attorno ai contesti di posizionamento
Se vuoi davvero avere una solida conoscenza di come usare i CSS per spostare gli elementi HTML nel punto in cui vuoi che vadano, devi assolutamente prendere confidenza con i contesti di posizionamento. E non intendo solo una comprensione casuale, intendo una profonda conoscenza delle loro differenze, comportamenti, stranezze, ecc.
Ci sono in realtà cinque valori di posizione che dovresti capire. Se non riesci a nominarli tutti e cinque senza guardarli, allora sei sicuramente un candidato principale per questo tipo di istruzione. Eccoli: statici, fissi, relativi, assoluti ed ereditari.
Devi sapere e capire tutti e cinque, ma i due grandi che cambieranno davvero il modo in cui il codice è il posizionamento assoluto e relativo. Imparare a maneggiare questi due contesti di posizionamento separatamente, e poi saltare nel modo in cui lavorano insieme, cambierà radicalmente il modo in cui visualizzi il layout CSS, lo prometto. È una rivelazione che renderà il tuo lavoro infinitamente più facile.
Risorse per ottenere lì
Il Lowdown sul posizionamento assoluto rispetto a quello relativo
Questa è la mia immersione profonda sul tema del contesto di posizionamento. Ho brevemente menzionato e spiegato tutti e cinque, ma in realtà mi concentro sui due grandi: come si differenziano, come sono diversi e come lavorano insieme. Leggi questo pezzo e sarai sulla buona strada per il posizionamento gratuito dei CSS.
Posizionamento CSS 101
Questo pezzo viene dal venerabile Un elenco a parte blog così subito sai che sarà sia approfondita che incredibilmente educativa. L'articolo è stato pubblicato nel 2010, ma le informazioni sono ancora perfettamente pertinenti e rappresentano un'ottima introduzione a tutti e cinque i contesti di posizionamento. Non è un articolo molto visivo, ma contiene un sacco di semplici esempi di codice per semplificarti ogni concetto.
Impara il posizionamento CSS in dieci passi
Questa è una fantastica panoramica dei vari contesti di posizionamento. Invece di un articolo lungo e tortuoso, questa pagina presenta una piccola scatola con dieci schede. Ogni scheda ha un piccolo frammento di codice e una frase o due che spiegano il codice. Off a destra è un layout di esempio dal vivo che si aggiorna con ciascuna scheda. Questo formato è fantastico per collegare visivamente i frammenti di codice ai layout che producono e consiglio vivamente di dargli uno sguardo se si fatica con spiegazioni di testo per lo più come quella sopra di ALA.
2. Master Floats
Quando si imparano i CSS per la prima volta, i float sembrano uno dei sistemi di layout più avvitati che si possano immaginare. Una volta che impari a usarli a un livello base, devi imparare tutto su come i genitori che contengono solo bambini fluttuanti abbiano un'altezza compressa, che poi porta a quarantasette modi diversi per risolvere il problema attraverso le correzioni e le manipolazioni di overflow.
Fortunatamente, a lungo termine, ci si abitua ai concetti che stanno alla base dei float e possono persino diventare così facili da usare che non li si pensa molto. L'unica cosa che si frappone tra te e quell'obiettivo è un solido articolo o due che realmente scava e spiega a fondo il comportamento e le tecniche di galleggiamento da zero.
Risorse per ottenere lì
Tutto ciò che non hai mai conosciuto sui float CSS
In questo articolo, copro quasi tutta la gamma di argomenti riguardanti i float nei CSS. Inizia con una discussione di base su cosa sono i galleggianti e come funzionano. Dopo questo, parlo di come i float influenzano le scatole degli elementi coinvolti, come i float diventano strani con elementi di altezze variabili, le nove regole che coprono il comportamento del float e, naturalmente, la debacle dell'altezza collassante e come risolverlo.
Tutto su galleggianti
Chris Coyier è sempre stato il mio autore preferito quando si tratta di argomenti relativi ai CSS e la sua introduzione ai float non delude. Se stai cercando una breve ma semplice discussione su come lavorare con i float, questo pezzo ti ha coperto. Mi piacciono particolarmente le illustrazioni semplici e attraenti utilizzate in tutto l'articolo.
Il mistero della proprietà Float CSS
Mentre i brani di Chris Coyier sono in genere brevi e diretti, il contenuto di Smashing Magazine è in genere piuttosto esteso con tonnellate di esempi e discussioni pertinenti. Questo articolo introduce il concetto di float, ti spiega tutto su come usarli e cancellarli e poi si lancia in una discussione su dove normalmente vedi i float utilizzati nei siti del mondo reale. Se hai bisogno di vedere la teoria prendere vita, questo è per te.
3. Conosci i tuoi selezionatori
Una delle chiavi per scrivere CSS buoni e puliti è avere una conoscenza approfondita di quali selettori CSS sono disponibili per te, come funzionano e in che misura sono supportati su vari browser. Sembra un argomento abbastanza semplice, ma in realtà il mondo dei selettori CSS è abbastanza complesso.
Ci sono tantissime cose interessanti da apprendere qui, dall'uso di selettori di valori di attributo e parole chiave di targeting nei nomi di classe a come il selettore universale può essere utile per il debug del tuo codice. Anche se pensi di riuscire a cavartela senza capire un mucchio di selettori di fantasia, la verità è che altri programmatori usano questa roba ogni giorno e devi essere in grado di capire quello che stai vedendo quando visiti la fonte della vista!
Risorse per ottenere lì
Selettori CSS: Just the Tricky Bits
Questo è un articolo divertente che prende in esame principalmente gli aspetti più complicati dei selettori CSS. Salto le cose a livello di terreno e salto direttamente a discutere di come il concetto di DOM si traduce nel targeting di vari aspetti del tuo documento con i CSS. Imparerai tutto sulla selezione di figli e fratelli, su come selezionare i selettori e molto altro ancora.
I 30 selettori CSS che devi memorizzare
Jeffrey Way è una rock star del Web Dev e articoli come questo dimostrano il perché. Questo articolo di Nettuts + copre una vasta gamma di selettori CSS in un formato semplice e breve che pone molta enfasi sul supporto del browser. Sorprendentemente, Jeff ha persino codificato pagine di esempio dal vivo per ognuno dei trenta selettori.
Selettori degli attributi CSS: come e perché dovresti utilizzarli
I selettori del valore dell'attributo sono uno dei sottoinsiemi più potenti dei selettori CSS, e CSS3 potenzia davvero tale potere. Non crederai a quanto i tuoi selezionatori possano essere versatili con un po 'di valore di attributo magico. Dopo aver letto questo articolo, ti aggirerai frasi come "selettore del valore di attributo della sottostringa arbitraria"? come un professionista.
4. Scopri i concetti di codifica DRY
? Non ripeti te stesso? Questa semplice frase ha implicazioni drastiche quando si parla di programmazione. Quando ti immergi davvero nelle pratiche di codifica DRY, il risultato è un codice più pulito, meno lavoro e un bellissimo nuovo flusso di lavoro che è tanto più potente quanto impressionante.
A differenza degli altri argomenti sopra, che sono piuttosto stretti, questo è un argomento piuttosto vasto che copre tutti i tipi di pratiche, tecniche e idee diverse. È interessante notare che una delle cose che hanno recentemente attirato la mia attenzione sulle pratiche di codifica DRY è l'uso dei preprocessori CSS.
Sebbene molti affermino che i preprocessori portano a pratiche di codifica scadenti, la realtà è l'opposto. Ovviamente, i preprocessori stessi aiutano a evitare la ripetizione manuale, ma vanno oltre. Esaminare l'output di strumenti come LESS e SASS e gli obiettivi per le lingue in generale mi ha portato a scrivere meglio i CSS puri! Una volta che hai padroneggiato concetti come @extend in Sass, non puoi fare a meno di pensare alle implicazioni quando stai codificando solo con CSS.
Risorse per ottenere lì
CSS ASCIUTTO: non ripetere il tuo CSS
In questo articolo, Steven Bradley ti presenta l'argomento di CSS ASCIUTTO e copre alcuni dei suoi principi e obiettivi principali. Riduce la pratica a tre semplici idee e mostra come implementare queste idee in un vero flusso di lavoro. I concetti sono ampiamente presi in prestito da una presentazione di Jeremy Clarke che copre lo stesso argomento.
Introduzione ai CSS orientati agli oggetti (OOCSS)
Come ho detto prima, le idee inerenti al movimento CSS DRY sono piuttosto estese e direttamente correlate ai concetti in altri costrutti. OOCS è una metodologia sempre più diffusa che ha lo scopo di aiutarti a creare fogli di lavoro più veloci ed efficienti con un'organizzazione superiore e meno ripetizioni. Ci sono due principi principali al lavoro in OOCS: separazione della struttura dalla pelle e separazione dei contenitori e del contenuto. Questo articolo di Smashing Magazine ti guiderà attraverso le idee di base e ti aiuterà ad applicarle al tuo lavoro.
Introduzione alle linee guida SMACSS per la scrittura di CSS
Ricorda Steven Bradley del primo articolo su DRY CSS? Ha anche scritto questo pezzo, che spiega un progetto simile ma separato da OOCS: SMACSS (un progetto di Jonathan Snook). Come con OOCSS, SMACSS ha due obiettivi principali. Il primo consiste nell'aumentare il valore semantico di una sezione di HTML e contenuto, e il secondo è di diminuire l'aspettativa di una specifica struttura HTML. Questo articolo spiega in dettaglio entrambi gli obiettivi e fornisce esempi di codice utili in modo da poter vedere SMACSS in azione.
5. Conoscere il supporto del browser
La quinta e ultima chiave per migliorare il tuo CSS è sapere cosa funziona dove. Il CSS3 è troppo allettante per la maggior parte di noi da ignorare, ma la dura verità è che un bel po 'di esso non funziona in alcuni browser (da alcuni browser ... io ovviamente intendo IE).
Il grande segreto che gli sviluppatori web principianti devono avere nella testa non è che abbiano bisogno di memorizzare ogni singola funzione CSS e come ogni browser conosciuto dall'uomo lo gestisca, piuttosto che ci sono risorse assolutamente sorprendenti a tua disposizione che ti danno questa informazione liberamente, devi solo sapere dove guardare.
Risorse per ottenere lì
Nailing Browser Support in CSS3 e HTML5: risorse preziose da utilizzare oggi
In questo articolo vi presento i relativamente pochi siti che ho aggiunto ai segnalibri per verificare il supporto del browser. Queste risorse sono fantastiche, visive e ti danno le informazioni di cui hai bisogno in un batter d'occhio per poter tornare alla codifica. Dai un'occhiata per vedere cosa sono!
Supporto browser per CSS3: qual è lo stato corrente?
Questo articolo è stato scritto più di un anno fa, quindi lo stato attuale? il pezzo è discutibile, ma non abbastanza è cambiato in questo momento per rendere obsolete le informazioni in questo articolo. Serve come una panoramica incredibilmente utile di varie proprietà CSS3, suddivise in sezioni basate su ciò che funziona ovunque e su cosa è necessario fare attenzione. Ti bastano pochi minuti per passare e vale la pena leggerlo.
L'importanza della compatibilità tra browser: suggerimenti e risorse
Se sei veramente nuovo ai CSS e hai bisogno di una introduzione di base sull'argomento della compatibilità dei browser e perché è importante, questo articolo di Noupe ti copre. Più che semplicemente venderti sull'idea di compatibilità, elenca un sacco di grandi risorse che puoi usare per garantire la massima compatibilità. Di particolare interesse è l'elenco di strumenti che ti aiuteranno a testare il tuo sito in vari browser.
Dovrei leggere tutto questo in 24 ore?
Ti ho presentato cinque argomenti assolutamente critici da studiare e non meno di quindici articoli dai quali puoi apprendere i principi che devi conoscere. Va tutto bene, ma nel mio titolo ho promesso che saresti migliorato in un solo giorno e non tutti hanno il tempo di sedersi e leggere quindici lunghi articoli!
La buona notizia è che ti ho dato tre articoli su ogni argomento in modo da avere una certa varietà tra cui scegliere. Ho spiegato i contenuti di ciascuno in dettaglio in modo da poter selezionare quello che meglio si adatta alle tue esigenze. Ricorda di scegliere gli articoli da leggere non basati su ciò che sai ma su ciò che non sai. Rendilo un obiettivo per colmare le lacune nelle tue conoscenze.
Il mio suggerimento è di navigare tra i contenuti sopra e selezionare cinque articoli da leggere (uno per ogni sezione). Anche questo è molto da fare in un giorno, ma la maggior parte di loro non è molto più di mille parole o giù di lì, molti sono meno. Sono sicuro che puoi farcela. Se non puoi, nessun problema. Cambia il tuo obiettivo per migliorare le tue abilità CSS in una settimana e leggi uno dei tuoi cinque articoli scelti ogni giorno per i prossimi cinque giorni. Garantisco che la prossima settimana sarai molto più bravo a scrivere CSS chiari, concisi, compatibili e riutilizzabili.
Quali altri concetti consigli?
Ora che hai letto i miei cinque argomenti principali che la gente dovrebbe rispolverare per migliorare le loro abilità CSS, voglio sentirti. Con quali altri argomenti ritieni che i programmatori CSS di solito si dibattano e quali risorse consigli per chiunque desideri saperne di più?
Foto d'archivio fornite per gentile concessione di BigStock