Sacha Greif lurte åpenlyst om CSS har blitt, vet du, for stort. Med alle godsakene som har blitt sendt i nettlesere de siste par årene – containerspørsmål! relativ fargesyntaks! kaskadelag! logiske egenskaper! områder i mediesøk! individuelle transformasjoner! :has() velger! – og alt det som er i den mulige horisonten – CSS veksler! hekkende! fargeblanding! rullelenkede animasjoner! scoped stiler! – Det er definitivt en annen læringskurve for CSS i disse dager for både nye og erfarne front-enders.
Det kan ha vært en tid da det var mulig å vite de fleste CSS-egenskapene og hvordan de fungerer. De dagene er for lengst forbi, i hvert fall for en gammel hånd som meg. Men det reiser på en måte spørsmålet: hvilken CSS må du absolutt kunne?
Vincas Stonys nylig tok et stikk i en liste. Chris sette sammen en basert på funksjoner utgitt siden CSS3. Du har sannsynligvis en idé om hva du vil inkludere i en liste. Hvis jeg måtte sette sammen en topp 5 og begrense meg til kun eiendommer og velgere, kan det se omtrent slik ut...
writing-mode
Jeg kan ikke si nok om writing-mode eiendom. Det som gjør det viktig - spesielt fra et læringsperspektiv - er at det setter deg opp for inkluderende prinsipper som tar hensyn til å lage layouter, uavhengig av brukerens språk. En god forståelse av writing-mode kommer til å føre til en forståelse av logiske egenskaper og verdier, og de på sin side legger grunnlaget for å forstå dokumentflyt og tenkning i form av block, inline, startog end snarere enn fysiske veibeskrivelser.
display
Jeg har vanskelig for å tro at noen kan skrive god CSS uten å ha et solid grep om display eiendom. Det er både en egenskap og et rammeverk for å lage layouter. Det er ingen Flexbox eller CSS Grid uten, noe som gjør det på en måte som en portvakt for å forstå de viktige funksjonene.
Pluss at display eiendom perfekt utfyller writing-mode. Det er akkurat det du trenger en gang writing-mode har utsatt deg for dokumentflyt og logiske retninger. Du kommer til å trenge en egenskap for enten å endre et elements normale flyt (som å endre et blokkelement til et innebygd) eller begynne å legge ut ting (som å lage en fleksibel layoutkontekst) og det er der display kommer inn i bildet.
margin / padding / border
Uff, jeg jukser helt her, men tenk å lære margin, paddingog border sammen er liksom uunngåelig. De er alle deler av Boksmodellen, alt hjelper med mellomrom og styling, og alle krever å bli kjent med CSS-lengdeenheter. Å vite hva disse egenskapene er laget for å gjøre og hvordan de bidrar til den beregnede størrelsen til et element, gir deg absolutt mye mer stylingkontroll, og fjerner enhver forvirring om hvorfor et element har den størrelsen det er - en vanlig CSS-hodepine!
::before og ::after
En annen hvor jeg jukser litt. Ja, ::before og ::after er to individuelle pseudo-elementer, men igjen, jeg kan ikke forestille meg å lære om det ene uten det andre. Det er en to-fer!
Jeg husker hvor utrolig det var for meg å få vite at disse fantes og kan brukes til å lage alt fra kule UI-effekter å fullføre enkelt-div illustrasjoner. Det åpner for nye muligheter og gir en første titt på hvor kraftig CSS egentlig er.
@media
Oj, jeg er allerede på mitt femte og siste element på listen og føler at det fortsatt er så mye CSS-godhet som hører hjemme her. Men hvis jeg må velge en siste ting, ville det vært det mediespørsmål. Hvorfor? Fordi det er en førsteklasses ingrediens for å lage flytende, fleksible layouter og forskjellige visningskontekster. Containerforespørsler kan ende opp med å slå dette av listen min etter hvert som det modnes, men foreløpig, @media er en flott primer for responsiv design.
Utover det, @media er et fint første skritt inn i de betingede kvalitetene til CSS. Enten vi skriver en spørring basert på typen enhet som brukes (f.eks. screen or print) eller når nettleserens visningsport oppfyller visse kriterier (f.eks. width >= 768px), Den @media syntaks er utrolig nyttig for å lage oppsett som er optimalisert for ulike forhold.
Å, og vi har ikke engang berørt hvordan @media forholder seg til tilgjengelighet, takket være sin evne til bruke stiler basert på en brukers preferanser (F.eks prefers-reduced-motion). Så, i tillegg til å lage betingede oppsett, er medieforespørsler et fint neste skritt mot å forstå inkluderende design.
Ærlige omtaler
Det er vanskelig å destillere CSS til en liste over fem egenskaper og velgere du må vite, spesielt nå som CSS er kraftigere i dag enn det var, for eksempel for fem år siden. Det er en rekke andre elementer jeg virkelig ønsket å inkludere, som (i ingen spesiell rekkefølge):
calc()has()colorfontoverflowposition(spesielt dette)z-index
Men jeg står ved mine valg. Å lære CSS er viktigere enn å huske en liste over egenskaper. Det er en reise, og jeg tror de fem jeg valgte skaper en fin liten læringsvei som setter scenen for å skrive gode stilregler og neste trinn for å dykke dypere inn i CSS.
Ok, fortell meg din!
Uenig i listen min? Du burde! Jeg vedder på at du har noen smarte meninger, og jeg vil se hvordan du ville ha rundet ut en topp 5-liste.
