5 passaggi per migliorare drasticamente le tue conoscenze CSS in 24 ore
Stai programmando da un po 'di tempo e conosci il tuo modo di aggirare un file CSS. Di certo non sei un maestro, ma con abbastanza armeggi puoi arrivare dove vuoi andare. Ti stai chiedendo però se riuscirai mai a superare quel punto in cui CSS è una tale lotta. Sarai mai in grado di elaborare un layout complesso senza ricorrere infine 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 ti manca la solida base che ti consente di programmare senza il fastidio di non capire esattamente come andrai dove ' stai andando, e questo punto è molto più vicino di quanto pensi. Propongo che ci siano cinque argomenti che aumenteranno drasticamente la tua comprensione dei CSS. Dedica un po 'di tempo a leggere ciascuno di essi nelle prossime ventiquattro ore e cambierai il modo di scrivere per sempre.
Esplora Envato Elements
1. Avvolgi la tua mente attorno al posizionamento dei contesti
Se vuoi davvero avere una solida conoscenza di come usare i CSS per spostare gli elementi HTML dove vuoi che vadano, devi assolutamente avere una buona presa sui contesti di posizionamento. E non intendo solo una comprensione casuale, intendo una profonda conoscenza delle loro differenze, comportamenti, stranezze, ecc.
In realtà ci sono cinque valori di posizione che dovresti capire. Se non puoi nominare tutti e cinque senza cercarli, allora sei sicuramente il candidato principale per questo po 'di educazione. Eccoli: statici, fissi, relativi, assoluti ed ereditari.
Devi conoscere e comprendere tutti e cinque, ma i due principali che cambieranno davvero il modo in cui codifichi sono il posizionamento assoluto e relativo. Imparare a utilizzare 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ù semplice.
Risorse per arrivarci
Il Lowdown sul posizionamento assoluto rispetto al posizionamento relativo
Questa è la mia profonda immersione nell'argomento del contesto di posizionamento. Cito brevemente e spiego tutti e cinque, ma mi concentro davvero sui due grandi: come differiscono, come sono diversi e come lavorano insieme. Leggi questo pezzo e sarai sulla buona strada per il posizionamento CSS senza mal di testa.
Posizionamento CSS 101
Questo pezzo proviene dal venerabile blog di A List Apart, così subito sai che sarà completo e incredibilmente educativo. 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 molti semplici esempi di codice per facilitare ogni concetto.
Scopri il posizionamento CSS in dieci passaggi
Questa è una panoramica incredibilmente breve dei vari contesti di posizionamento. Invece di un lungo articolo a fiato, questa pagina presenta una scatoletta con dieci schede. Ogni scheda ha un piccolo frammento di codice e una o due frasi che spiegano il codice. A destra c'è un layout di esempio live che si aggiorna con ogni scheda. Questo formato è fantastico per collegare visivamente frammenti di codice ai layout che producono e consiglio vivamente di dargli un'occhiata se hai difficoltà con spiegazioni di testo come quella sopra di ALA.
2. Galleggianti master
Quando apprendi i CSS per la prima volta, i float sembrano uno dei sistemi di layout più complicati che si possano immaginare. Una volta che impari a usarli a livello base, devi imparare tutto su come i genitori che contengono solo bambini galleggianti abbiano un'altezza collassata, il che porta a quarantasette modi diversi di risolvere il problema attraverso correzioni chiare e manipolazioni di overflow.
Fortunatamente, a lungo termine, ti abitui ai concetti dietro i galleggianti e possono persino diventare così facili da usare che non ci pensi molto. L'unica cosa che si frappone tra te e quell'obiettivo è un solido articolo o due che scava davvero e spiega a fondo il comportamento e le tecniche del galleggiante da zero.
Risorse per arrivarci
Tutto ciò che non hai mai saputo dei float CSS
In questo articolo, tratterò quasi l'intera gamma di argomenti riguardanti i float nei CSS. Inizia con una discussione di base su cosa sono i galleggianti e su come funzionano. Dopo questo, parlo di come i float influenzano le scatole degli elementi coinvolti, come i float diventano strani con elementi di diverse altezze, le nove regole che coprono il comportamento del float e, naturalmente, il disastro dell'altezza collassante e come risolverlo.
Tutto sui galleggianti
Chris Coyier è sempre stato il mio autore preferito per quanto riguarda gli argomenti relativi ai CSS e la sua introduzione ai float non delude. Se stai cercando una discussione breve ma diretta 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 mirati, il contenuto di Smashing Magazine di solito è piuttosto ampio con tonnellate di esempi e discussioni pertinenti. Questo articolo introduce il concetto di float, ti dice tutto su come usarli e cancellarli e quindi avvia una discussione su dove in genere vedi i float usati nei siti del mondo reale. Se hai bisogno di vedere la teoria prendere vita, questa è per te.
3. Conosci i tuoi selettori
Una delle chiavi per scrivere un buon CSS pulito è avere una buona conoscenza di ciò che i selettori CSS sono disponibili per te, come funzionano e il grado in cui sono supportati su vari browser. Sembra un argomento abbastanza semplice, ma in realtà il mondo dei selettori CSS è piuttosto complesso.
Ci sono un sacco di diverse cose interessanti da imparare qui, dall'uso dei selettori di valore di attributo e dal targeting di parole chiave nei nomi di classe a come il selettore universale può essere utile per il debug del codice. Anche se pensi di poter cavartela personalmente senza capire un mucchio di selettori fantasiosi, la verità è che altri programmatori usano questa roba ogni giorno e devi essere in grado di capire cosa stai vedendo quando colpisci la vista sorgente!
Risorse per arrivarci
Selettori CSS: solo i trucchi
Questo è un articolo divertente che esamina principalmente gli aspetti più complicati dei selettori CSS. Salto le cose a livello del suolo e vado subito a discutere su come il concetto di DOM si traduca nel targeting di vari aspetti del tuo documento con i CSS. Imparerai tutto sulla selezione di bambini e fratelli, come concatenare i selettori e molto altro.
I 30 selettori CSS che devi memorizzare
Jeffrey Way è una rockstar di sviluppo web 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. Abbastanza sorprendentemente, Jeff ha persino codificato pagine di esempio dal vivo per ciascuno dei trenta selettori.
Selettori di attributi CSS: come e perché dovresti usarli
I selettori di valore di attributo sono uno dei sottoinsiemi più potenti di selettori CSS e CSS3 aumenta davvero tale potenza. Non crederai a quanto possano diventare versatili i tuoi selettori con un piccolo valore magico. Dopo aver letto questo articolo, ti metti in giro frasi come "selettore di valore di attributo di sottostringa arbitrario" come un professionista.
4. Impara i concetti di codifica DRY
"Non ripetere te stesso." Questa semplice frase ha implicazioni drastiche quando si tratta 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 potente quanto straordinario.
A differenza degli altri argomenti sopra, che sono abbastanza stretti, questo è un argomento piuttosto vasto che copre tutti i tipi di pratiche, tecniche e idee diverse. È interessante notare che una delle cose che recentemente mi sono concentrata sulle pratiche di codifica DRY è l'uso dei preprocessori CSS.
Sebbene molti sostengano che i preprocessori portino a pratiche di codifica scadenti, la realtà è l'opposto. Ovviamente, i preprocessori stessi aiutano a evitare la ripetizione manuale, ma va oltre. Esaminare l'output di strumenti come LESS e SASS e gli obiettivi per le lingue in generale mi ha portato a scrivere meglio CSS puro! Una volta padroneggiati concetti come @extend in Sass, non puoi fare a meno di pensare alle implicazioni quando stai programmando con solo CSS.
Risorse per arrivarci
CSS SECCO: non ripetere il tuo CSS
In questo articolo, Steven Bradley ti introduce all'argomento dei DRY CSS e tratta alcuni dei suoi principi e obiettivi principali. Riduce la pratica a tre idee semplici e ti mostra come implementare queste idee in un flusso di lavoro reale. I concetti sono in gran parte presi in prestito da una presentazione di Jeremy Clarke che copre lo stesso argomento.
Un'introduzione ai CSS orientati agli oggetti (OOCSS)
Come ho detto prima, le idee inerenti al movimento DRY CSS sono piuttosto ampie e direttamente correlate ai concetti di altri costrutti. OOCS è una metodologia sempre più popolare che mira ad aiutarti a creare fogli di stile più veloci, più efficienti con un'organizzazione superiore e meno ripetizioni. Ci sono due principi principali all'opera 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.
Un'introduzione alle linee guida SMACSS per la scrittura di CSS
Ricordi Steven Bradley dal 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 è aumentare il valore semantico di una sezione di HTML e contenuto, e il secondo è ridurre l'aspettativa di una struttura HTML specifica. Questo articolo spiega in dettaglio entrambi gli obiettivi e fornisce utili esempi di codice in modo da poter vedere SMACSS in azione.
5. Conosci il tuo supporto per il browser
La quinta e ultima chiave per migliorare il tuo CSS è sapere cosa funziona dove. CSS3 è troppo allettante per la maggior parte di noi da ignorare, ma la dura verità è che un sacco di esso non funziona in alcuni browser (per "determinati browser" intendo ovviamente IE).
Il grande segreto di cui gli sviluppatori web principianti devono mettersi in testa non è che devono memorizzare ogni singola funzionalità CSS e come la gestisce ogni browser noto all'uomo, invece è che ci sono risorse assolutamente incredibili disponibili per darti queste informazioni liberamente, devi solo sapere dove cercare.
Risorse per arrivarci
Supporto per Nailing Browser in CSS3 e HTML5: risorse preziose da utilizzare oggi
In questo articolo ti presento i relativamente pochi siti che ho aggiunto ai segnalibri per controllare il supporto del browser. Queste risorse sono fantastiche, visive e ti danno le informazioni di cui hai bisogno in un batter d'occhio in modo da poter tornare alla programmazione. Dai un'occhiata per vedere cosa sono!
Supporto browser per CSS3: qual è lo stato attuale?
Questo articolo è stato scritto più di un anno fa, quindi il pezzo sullo "stato attuale" è discutibile, ma non è cambiato abbastanza in questo periodo per rendere obsolete le informazioni contenute in questo articolo. Serve come una panoramica incredibilmente utile di varie proprietà CSS3, divise in sezioni basate su ciò che funziona ovunque e su ciò a cui devi fare attenzione. Ti bastano pochi minuti per passare e ne vale la pena leggere.
L'importanza della compatibilità tra browser: suggerimenti e risorse
Se sei veramente nuovo di CSS e hai bisogno di un'introduzione di base all'argomento della compatibilità del browser e perché è importante, questo articolo di Noupe ti ha coperto. Più che limitarti a venderti sull'idea di compatibilità, elenca un mucchio di grandi risorse che puoi utilizzare 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 su cui studiare e non meno di quindici articoli dai quali puoi imparare 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 varietà tra cui scegliere. Ho spiegato dettagliatamente i contenuti di ciascuno in modo da poter selezionare quello più adatto alle tue esigenze. Ricorda di scegliere gli articoli da leggere non in base a ciò che sai, ma a ciò che non conosci. Renderlo un obiettivo per colmare le lacune nelle tue conoscenze.
Il mio consiglio è di sfogliare il contenuto sopra e scegliere cinque articoli da leggere (uno per ogni sezione). Anche questo è molto da intraprendere in un giorno, ma la maggior parte di loro non è troppo più di mille parole, 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 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 mi consigliate?
Ora che hai letto i miei primi cinque argomenti su cui le persone dovrebbero ripassare per migliorare le loro abilità CSS, voglio sentirti. Con quali altri argomenti credi che i programmatori CSS di solito lottino e quali risorse consigliate a chiunque desideri saperne di più?
Foto stock fornite per gentile concessione di BigStock
