Sacha Greif undrade öppet om CSS har blivit, du vet, för stort. Med alla godsaker som har skickats i webbläsare de senaste åren — containerfrågor! relativ färgsyntax! kaskadlager! logiska egenskaper! intervall i mediefrågor! individuella transformationer! :has() väljare! — och allt som finns vid den möjliga horisonten — CSS växlar! nesting! färgblandning! scroll-länkade animationer! omfångade stilar! — Det finns definitivt en annan inlärningskurva för CSS nuförtiden för både nya och erfarna front-endrar.
Det kan ha funnits en tid då det var möjligt att känna till de flesta CSS-egenskaper och hur de fungerar. De dagarna är för länge sedan förbi, åtminstone för en gammal hand som jag. Men det väcker frågan: vilken CSS måste du absolut kunna?
Vincas Stonys nyligen tog ett hugg på en lista. Chris sätta ihop en baserat på funktioner som släppts sedan CSS3. Du har förmodligen en idé om vad du skulle ta med i en lista. Om jag var tvungen att sätta ihop en topp 5 och begränsa mig till enbart egenskaper och väljare, kan det se ut ungefär så här...
writing-mode
Jag kan inte säga tillräckligt om writing-mode fast egendom. Det som gör det viktigt – särskilt ur ett inlärningsperspektiv – är att det förbereder dig för inkluderande principer som står för att skapa layouter, oavsett användarens språk. En god förståelse för writing-mode kommer att leda till en förståelse för logiska egenskaper och värden, och de i sin tur skapar förutsättningar för att förstå dokumentflödet och tänka i termer av block, inline, startoch end snarare än fysiska anvisningar.
display
Jag har svårt att tro att någon kan skriva bra CSS utan att ha ett gediget grepp om display fast egendom. Det är både en egenskap och ett ramverk för att skapa layouter. Det finns ingen Flexbox eller CSS Grid utan det, vilket gör det som en gatekeeper för att förstå dessa viktiga funktioner.
Dessutom display egendom kompletterar perfekt writing-mode. Det är precis vad du behöver en gång writing-mode har utsatt dig för dokumentflöde och logiska anvisningar. Du kommer att behöva en egenskap för att antingen ändra ett elements normala flöde (som att ändra ett blockelement till ett inline-element) eller börja lägga ut saker (som att skapa en flexibel layoutkontext) och det är där display kommer in i bilden.
margin / padding / border
Usch, jag är helt otrogen här men tänk lärande margin, paddingoch border tillsammans är liksom oundvikligt. De är alla delar av Boxmodellen, allt hjälper till med mellanrum och styling, och alla kräver att man bekantar sig med CSS-längdenheter. Att veta vad dessa egenskaper är designade för att göra och hur de bidrar till den beräknade storleken på ett element ger dig verkligen mycket mer stylingkontroll, och skingra all förvirring om varför ett element har den storlek som det är - en vanlig CSS-huvudvärk!
::before och ::after
En till där jag fuskar lite. Ja, ::before och ::after är två individuella pseudoelement, men återigen, jag kan inte föreställa mig att lära mig om det ena utan det andra. Det är en två-fer!
Jag minns hur häpnadsväckande det var för mig att lära mig att dessa fanns och kan användas för att skapa allt från coola UI-effekter för att slutföra enkel-div illustrationer. Det öppnar upp för nya möjligheter och ger en första titt på hur kraftfull CSS verkligen är.
@media
Oj, jag är redan vid min femte och sista punkt i listan och känner att det fortfarande finns så mycket CSS-godhet som hör hemma här. Men om jag måste välja en sista sak så skulle det vara det mediafrågor. Varför? Eftersom det är en viktig ingrediens för att skapa flytande, flexibla layouter och olika visningssammanhang. Behållarfrågor kan sluta ta bort det här från min lista när det mognar, men för nu, @media är en fantastisk primer för responsiv design.
Bortom det, @media är ett bra första steg in i de villkorliga egenskaperna hos CSS. Oavsett om vi skriver en fråga baserat på den typ av enhet som används (t.ex. screen or print) eller när webbläsarens visningsport uppfyller ett visst kriterium (t.ex. width >= 768px), Den @media syntax är otroligt användbar för att skapa layouter som är optimerade för olika förhållanden.
Åh, och vi har inte ens berört hur @media relaterar till tillgänglighet, tack vare dess förmåga att tillämpa stilar baserat på en användares preferenser (t.ex, prefers-reduced-motion). Så, förutom att skapa villkorliga layouter, är mediefrågor ett bra nästa steg mot att förstå inkluderande design.
Hederliga omnämnanden
Destillering av CSS till en lista med fem måste-känna egenskaper och väljare är tufft, särskilt nu när CSS är kraftfullare idag än vad det var för fem år sedan. Det finns ett antal andra föremål som jag verkligen ville ha med, som (i ingen speciell ordning):
calc()has()colorfontoverflowposition(speciellt detta)z-index
Men jag står för mina val. Att lära sig CSS är viktigare än att memorera en lista med egenskaper. Det är en resa och jag tror att de fem jag valde skapar en trevlig liten inlärningsväg som sätter scenen för att skriva bra stilregler och nästa steg för att dyka djupare in i CSS.
Okej, berätta din!
Håller du inte med om min lista? Du borde! Jag slår vad om att du har några smarta åsikter och jag vill se hur du skulle ha avrundat en topp 5-lista.
