Sacha Greif imestas avalikult kas CSS on muutunud liiga suureks. Koos kõigi nende maiuspaladega, mis on viimase paari aasta jooksul brauserites tarnitud – konteineri päringud! suhteline värvide süntaks! kaskaadikihid! loogilised omadused! ulatub meediapäringutes! individuaalsed teisendused! :has() valija! - ja kõik see, mis on võimalikul silmapiiril - CSS-i lülitid! pesitsevate! värvide segamine! kerimislingiga animatsioonid! ulatusega stiilid! — tänapäeval on CSS-i õppimiskõver nii uute kui ka kogenud kasutajate jaoks kindlasti erinev.
Võib-olla oli aeg, mil oli võimalik teada enamikku CSS-i atribuute ja nende toimimist. Need ajad on ammu möödas, vähemalt minusuguse vana käe jaoks. Kuid see tekitab küsimuse: millist CSS-i peate kindlasti teadma?
Vincas Stonys hiljuti torkas nimekirja. Chris pane üks kokku põhineb funktsioonidel, mis on välja antud alates CSS3-st. Tõenäoliselt on teil idee, mida nimekirja lisada. Kui ma peaksin Top 5 kokku panema ja piirduma ainult omaduste ja valijatega, võib see välja näha umbes selline…
writing-mode
Ma ei saa selle kohta piisavalt öelda writing-mode vara. Selle muudab oluliseks – eriti õppimise seisukohalt – see, et see seab teid paika kaasavad põhimõtted, mis arvestavad paigutuste loomisel, olenemata kasutaja keelest. Hea arusaamine writing-mode viib mõistmiseni loogilised omadused ja väärtused, ja need omakorda loovad aluse dokumendivoo mõistmiseks ja terminites mõtlemiseks block, inline, startja end mitte füüsilised juhised.
display
Mul on raske uskuda, et keegi suudab head CSS-i kirjutada, ilma et tal oleks sellest tugevat arusaama display vara. See on nii omadus kui ka raamistik paigutuste loomiseks. Ilma selleta pole Flexboxi ega CSS-võrku, mistõttu on see nende oluliste funktsioonide mõistmisel justkui väravavaht.
Lisaks display vara täiendab suurepäraselt writing-mode. See on täpselt see, mida üks kord vaja läheb writing-mode on tutvustanud teile dokumendivoogu ja loogilisi juhiseid. Teil on vaja atribuuti, et muuta elemendi tavalist voogu (nt plokkelemendi muutmine tekstisiseseks) või asjade paigutuse alustamiseks (nt paindliku paigutuse konteksti loomine) ja see on koht, kus display mängib.
margin / padding / border
Oeh, ma petan siin täiesti, aga mõtle õppimisele margin, paddingja border koos on omamoodi vältimatu. Nad kõik on osad Kasti mudel, kõik aitavad vahekauguste ja stiilide osas ning kõik nõuavad tutvumist CSS-i pikkuse ühikud. Teades, milleks need omadused on ette nähtud ja kuidas need aitavad kaasa elemendi arvutatud suurusele, annab teile kindlasti palju rohkem stiilikontrolli ja hajutab segaduse selle üle, miks element on sellise suurusega – tavaline CSS-i peavalu!
::before ja ::after
Veel üks, kus ma natuke petan. jah, ::before ja ::after on kaks individuaalset pseudoelementi, kuid jällegi ei kujuta ma ette ühe tundmaõppimist ilma teiseta. See on kahekordne!
Mäletan, kui jahmatav oli minu jaoks teada saada, et need on olemas ja nende põhjal saab kõike luua lahedad kasutajaliidese efektid lõpule ühe osaga illustratsioonid. See avab uusi võimalusi ja annab esimese pilgu, kui võimas CSS tegelikult on.
@media
Oeh, ma olen juba oma nimekirjas viiendal ja viimasel elemendil ja tunnen, et siia kuulub veel nii palju CSS-i headust. Aga kui ma peaksin valima ühe viimase asja, siis see oleks meediapäringud. Miks? Sest see on peamine koostisosa sujuva, paindliku paigutuse ja erinevate vaatamiskontekstide loomisel. Konteinerite päringud võib küpsedes selle minu nimekirjast välja lüüa, kuid praegu @media on suurepärane krunt reageeriva disaini jaoks.
Peale seda @media on kena esimene samm CSS-i tingimuslike omaduste poole. Kas me kirjutame päringu kasutatava seadme tüübi põhjal (nt screen or print) või kui brauseri vaateava vastab teatud kriteeriumidele (nt width >= 768px) @media süntaks on uskumatult kasulik erinevate tingimuste jaoks optimeeritud paigutuste loomiseks.
Oh, ja me pole isegi puudutanud, kuidas @media on seotud juurdepääsetavusega, tänu oma võimele rakendada stiile kasutaja eelistuste põhjal (nt prefers-reduced-motion). Nii et lisaks tingimuslike paigutuste loomisele on meediapäringud kena järgmine samm kaasava disaini mõistmisel.
Austavad mainimised
CSS-i viimine viie kohustusliku atribuudi ja valija loendisse on keeruline, eriti nüüd, kui CSS on tänapäeval võimsam kui näiteks viis aastat tagasi. On mitmeid muid üksusi, mida ma tõesti tahtsin lisada, näiteks (mitte kindlas järjekorras):
calc()has()colorfontoverflowposition(eriti see)z-index
Aga ma jään oma valikute juurde. CSS-i õppimine on olulisem kui omaduste loendi meeldejätmine. See on teekond ja ma arvan, et need viis, mille ma valisin, on kena väike õppimistee, mis loob aluse heade stiilireeglite kirjutamiseks ja järgmisteks sammudeks CSS-i süvenemiseks.
Olgu, ütle mulle oma!
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.
