Sacha Greif apertamente chiesto se il CSS è diventato, sai, troppo grande. Con tutte le chicche che sono state spedite nei browser negli ultimi due anni — query contenitore! sintassi dei colori relativi! strati a cascata! proprietà logiche! intervalli nelle media query! trasformazioni individuali! :has() selettore! - e tutto ciò che è all'orizzonte possibile - Commutatori CSS! annidamento! miscelazione dei colori! animazioni collegate a scorrimento! stili con ambito! - al giorno d'oggi c'è sicuramente una curva di apprendimento diversa per i CSS sia per i front-end nuovi che per quelli esperti.
Potrebbe esserci stato un tempo in cui era possibile conoscere la maggior parte delle proprietà CSS e come funzionano. Quei giorni sono ormai lontani, almeno per un veterano come me. Ma questo fa sorgere la domanda: quale CSS devi assolutamente conoscere?
Vincas Stonys di recente ha preso una pugnalata a una lista. Chris metterne uno insieme basato sulle funzionalità rilasciate a partire da CSS3. Probabilmente hai un'idea di cosa includeresti in un elenco. Se dovessi mettere insieme una Top 5 e limitarmi solo alle proprietà e ai selettori, potrebbe assomigliare a questo...
writing-mode
Non posso che elogiare il writing-mode proprietà. Ciò che lo rende importante, soprattutto dal punto di vista dell'apprendimento, è che ti prepara a principi inclusivi che tengono conto della creazione di layout, indipendentemente dalla lingua dell'utente. Una buona comprensione di writing-mode porterà alla comprensione di proprietà logiche e valorie quelli, a loro volta, preparano il terreno per comprendere il flusso di documenti e pensare in termini di block, inline, starte end piuttosto che direzioni fisiche.
display
Faccio fatica a credere che qualcuno possa scrivere un buon CSS senza avere una solida conoscenza del display proprietà. È sia una proprietà che un framework per la creazione di layout. Non c'è Flexbox o CSS Grid senza di esso, rendendolo una sorta di custode per comprendere quelle caratteristiche importanti.
Inoltre, il display proprietà integra perfettamente writing-mode. È esattamente ciò di cui avrai bisogno una volta writing-mode ti ha esposto al flusso di documenti e alle direzioni logiche. Avrai bisogno di una proprietà per modificare il flusso normale di un elemento (come cambiare un elemento di blocco in uno in linea) o iniziare a disporre le cose (come creare un contesto di layout flessibile) ed è qui che display entra in gioco.
margin / padding / border
Ugh, sto barando totalmente qui, ma pensa di imparare margin, paddinge border insieme è quasi inevitabile. Sono tutte parti di Il modello della scatola, tutti aiutano con la spaziatura e lo stile e tutti richiedono di familiarizzare Unità di lunghezza CSS. Sapere cosa sono progettate per fare queste proprietà e come contribuiscono alla dimensione calcolata di un elemento ti dà sicuramente molto più controllo sullo stile e dissipa ogni confusione sul perché un elemento ha le dimensioni che è - un comune mal di testa CSS!
::before ed ::after
Un altro in cui baro un po'. Sì, ::before ed ::after sono due singoli pseudo-elementi, ma ancora una volta, non riesco a immaginare di conoscere l'uno senza l'altro. È un due-fer!
Ricordo quanto è stato strabiliante per me apprendere che esistevano e che possono essere usati per creare qualsiasi cosa fantastici effetti dell'interfaccia utente per completare illustrazioni a divisione singola. Apre nuove possibilità e fornisce una prima occhiata a quanto siano realmente potenti i CSS.
@media
Oof, sono già al mio quinto e ultimo elemento nell'elenco e sento che c'è ancora così tanta bontà CSS che appartiene a questo. Ma se devo scegliere un'ultima cosa, sarebbe query multimediali media. Come mai? Perché è un ingrediente fondamentale per creare layout fluidi e flessibili e diversi contesti visivi. Query sui contenitori potrei finire per eliminarlo dalla mia lista man mano che matura, ma per ora, @media è un ottimo primer per il design reattivo.
Oltre a questo, @media è un bel primo passo verso le qualità condizionali dei CSS. Se stiamo scrivendo una query basata sul tipo di dispositivo utilizzato (ad es. screen or print) o quando il viewport del browser soddisfa determinati criteri (ad es. width >= 768px), La @media la sintassi è incredibilmente utile per creare layout ottimizzati per condizioni diverse.
Oh, e non abbiamo nemmeno toccato il come @media riguarda l'accessibilità, grazie alla sua capacità di applicare stili in base alle preferenze dell'utente (per esempio, prefers-reduced-motion). Quindi, oltre a creare layout condizionali, le media query sono un bel passo successivo verso la comprensione del design inclusivo.
Menzioni d'onore
Distillare i CSS in un elenco di cinque proprietà e selettori da conoscere è difficile, soprattutto ora che i CSS sono più potenti oggi di quanto non fossero, diciamo, anche cinque anni fa. Ci sono un certo numero di altri elementi che volevo davvero includere, come (in nessun ordine particolare):
calc()has()colorfontoverflowposition(soprattutto questo)z-index
Ma resto fedele alle mie scelte. Imparare i CSS è più importante che memorizzare un elenco di proprietà. È un viaggio e penso che i cinque che ho scelto tracciano un bel percorso di apprendimento che pone le basi per scrivere buone regole di stile e passi successivi per immergersi più a fondo nei CSS.
Va bene, dimmi la tua!
Non sei d'accordo con la mia lista? Dovresti! Scommetto che hai delle opinioni intelligenti e voglio vedere come avresti completato una Top 5 list.
