Sacha Greif s-a întrebat deschis dacă CSS a ajuns să fie, știi, prea mare. Cu toate bunătățile care au fost livrate în browsere în ultimii doi ani - interogări container! sintaxa de culoare relativă! straturi în cascadă! proprietăți logice! intervale de interogări media! transformări individuale! :has() selector! - și tot ce este la orizont posibil - Comută CSS! cuiburi! amestecarea culorilor! animații legate prin defilare! stiluri întinse! — Cu siguranță există o curbă de învățare diferită pentru CSS în zilele noastre, atât pentru front-enders noi, cât și experimentați.
S-ar putea să fi existat o perioadă în care a fost posibil să cunoaștem majoritatea proprietăților CSS și cum funcționează acestea. Acele zile au trecut de mult, cel puțin pentru o mână bătrână ca mine. Dar așa ceva ridică întrebarea: ce CSS trebuie neapărat să știi?
Vincas Stonys recent a înjunghiat o listă. Chris pune unul împreună bazat pe caracteristicile lansate începând cu CSS3. Probabil că ai o idee despre ce ai include într-o listă. Dacă ar fi să pun un Top 5 împreună și să mă limitez doar la proprietăți și selectoare, ar putea arăta cam așa...
writing-mode
Nu pot spune destule despre writing-mode proprietate. Ceea ce îl face important – mai ales din perspectiva învățării – este că te pregătește pentru principii incluzive care țin cont de crearea machetelor, indiferent de limba utilizatorului. O bună înțelegere a writing-mode va duce la o înțelegere a proprietăți și valori logice, iar acestea, la rândul lor, pregătesc scena pentru înțelegerea fluxului de documente și gândirea în termeni de block, inline, start, și end mai degrabă decât direcţiile fizice.
display
Îmi este greu să cred că oricine poate scrie CSS bun fără a avea o înțelegere solidă asupra display proprietate. Este atât o proprietate, cât și un cadru pentru crearea machetelor. Nu există Flexbox sau CSS Grid fără ele, făcându-l un fel de gardian pentru înțelegerea acestor caracteristici importante.
În plus, display proprietatea completează perfect writing-mode. Este exact ceea ce vei avea nevoie o dată writing-mode v-a expus fluxului de documente și direcțiilor logice. Veți avea nevoie de o proprietate fie pentru a modifica fluxul normal al unui element (cum ar fi schimbarea unui element bloc cu unul inline) sau pentru a începe să aranjați lucrurile (cum ar fi crearea unui context de aspect flexibil) și aici este cazul display intră în joc.
margin / padding / border
Ugh, trișez complet aici, dar gândește-te să învăț margin, padding, și border împreună este un fel de inevitabil. Toate sunt părți ale Modelul cutie, toate ajută la spațiere și stil, și toate necesită familiarizarea cu Unități de lungime CSS. Știind ce sunt concepute pentru a face aceste proprietăți și cum contribuie ele la dimensiunea calculată a unui element, vă oferă cu siguranță mult mai mult control al stilului și elimină orice confuzie cu privire la motivul pentru care un element are dimensiunea pe care o are - o durere de cap comună CSS!
::before și ::after
Încă una în care trișez puțin. Da, ::before și ::after sunt două pseudo-elemente individuale, dar din nou, nu îmi pot imagina că învăț despre unul fără celălalt. Este un doi-fer!
Îmi amintesc cât de uimitor a fost pentru mine să învăț că acestea existau și pot fi folosite pentru a crea totul din efecte interesante de UI pentru a finaliza ilustrații single-div. Deschide noi posibilități și oferă o primă privire asupra cât de puternic este cu adevărat CSS.
@media
Oof, sunt deja la al cincilea și ultimul articol din listă și simt că există încă atât de multă bunătate CSS care aparține aici. Dar dacă ar trebui să aleg un ultim lucru, acesta ar fi interogări media. De ce? Pentru că este un ingredient principal pentru crearea unor machete fluide, flexibile și diferite contexte de vizionare. Interogări de containere ar putea ajunge să scoată asta de pe lista mea pe măsură ce se maturizează, dar pentru moment, @media este un primer excelent pentru design responsive.
Dincolo de asta, @media este un prim pas frumos în calitățile condiționale ale CSS. Fie că scriem o interogare bazată pe tipul de dispozitiv care este utilizat (de exemplu, screen or print) sau a când fereastra de vizualizare a browserului îndeplinește un anumit criteriu (de exemplu, width >= 768px), @media sintaxa este incredibil de utilă pentru a crea machete care sunt optimizate pentru diferite condiții.
Ah, și nici măcar nu am atins cum @media se referă la accesibilitate, datorită capacității sale de a aplicați stiluri bazate pe preferințele utilizatorului (de exemplu, prefers-reduced-motion). Așadar, pe lângă crearea de layout-uri condiționate, interogările media reprezintă un următor pas bun spre înțelegerea designului incluziv.
Mențiuni onerabile
Distilarea CSS într-o listă de cinci proprietăți și selectori care trebuie să cunoască este dificilă, mai ales acum că CSS este mai puternic astăzi decât era, să zicem, chiar și acum cinci ani. Există o serie de alte articole pe care mi-am dorit cu adevărat să le includ, cum ar fi (în nicio ordine anume):
calc()has()colorfontoverflowposition(mai ales asta)z-index
Dar rămân cu alegerile mele. Învățarea CSS este mai importantă decât memorarea unei liste de proprietăți. Este o călătorie și cred că cei cinci pe care i-am ales creează o cale de învățare drăguță care pregătește scena pentru scrierea unor reguli bune de stil și pașii următori pentru aprofundarea în CSS.
Bine, spune-mi pe a ta!
Disagree with my list? You should! I’ll bet you have some smart opinions and I want to see what how you would have rounded out a Top 5 list.
