Sacha Greif vroeg zich openlijk af of CSS, weet je, te groot is geworden. Met al het lekkers dat de afgelopen jaren in browsers is geleverd - containervragen! relatieve kleurensyntaxis! trapsgewijze lagen! logische eigenschappen! bereiken in mediaquery's! individuele transformaties! :has() keuzeschakelaar! - en alles wat er aan de horizon mogelijk is - CSS schakelt! nesten! kleur mengen! scroll-gekoppelde animaties! scoped stijlen! — er is tegenwoordig zeker een andere leercurve voor CSS voor zowel nieuwe als doorgewinterde frontenders.
Er is misschien een tijd geweest dat het mogelijk was om de meeste CSS-eigenschappen en hoe ze werken te kennen. Die dagen zijn allang voorbij, tenminste voor een ouwe rot als ik. Maar dat roept de vraag op: welke CSS moet je absoluut kennen?
Vincas Stonys onlangs nam een gooi naar een lijst. Chris zet er een in elkaar gebaseerd op functies die zijn uitgebracht sinds CSS3. U hebt waarschijnlijk een idee van wat u in een lijst zou opnemen. Als ik een Top 5 zou moeten samenstellen en mezelf zou beperken tot alleen eigenschappen en selectors, dan zou het er ongeveer zo uit kunnen zien…
writing-mode
Ik kan niet genoeg zeggen over de writing-mode eigendom. Wat het belangrijk maakt, vooral vanuit een leerperspectief, is dat het je klaarstoomt voor inclusieve principes die verantwoordelijk zijn voor het maken van lay-outs, ongeacht de taal van de gebruiker. Een goed begrip van writing-mode zal leiden tot inzicht in logische eigenschappen en waarden, en die vormen op hun beurt de basis voor het begrijpen van de documentstroom en het denken in termen van block, inline, start en end in plaats van fysieke aanwijzingen.
display
Ik vind het moeilijk te geloven dat iemand goede CSS kan schrijven zonder een goed begrip te hebben van de display eigendom. Het is zowel een eigenschap als een raamwerk voor het maken van lay-outs. Er is geen Flexbox of CSS Grid zonder, waardoor het een soort poortwachter is om die belangrijke functies te begrijpen.
Plus de display woning vormt een perfecte aanvulling writing-mode. Het is precies wat je een keer nodig hebt writing-mode heeft u blootgesteld aan documentstromen en logische richtingen. Je hebt een eigenschap nodig om ofwel de normale stroom van een element te veranderen (zoals het veranderen van een blokelement in een inline element) of om dingen op te maken (zoals het maken van een flexibele lay-outcontext) en dat is waar display in het spel komt.
margin / padding / border
Ugh, ik speel hier helemaal vals, maar denk aan leren margin, padding en border samen is onvermijdelijk. Het zijn allemaal onderdelen van Het doosmodel, allemaal hulp bij spatiëring en styling, en ze vereisen allemaal om kennis mee te maken CSS lengte-eenheden. Weten wat deze eigenschappen moeten doen en hoe ze bijdragen aan de berekende grootte van een element, geeft je zeker veel meer stylingcontrole en verdrijft elke verwarring over waarom een element de grootte heeft die het is - een veelvoorkomende CSS-hoofdpijn!
::before en ::after
Weer eentje waarbij ik een beetje vals speel. Ja, ::before en ::after zijn twee individuele pseudo-elementen, maar nogmaals, ik kan me niet voorstellen dat ik over het een zou leren zonder het ander. Het is een twee-fer!
Ik herinner me hoe verbluffend het voor mij was om te leren dat deze bestonden en gebruikt kunnen worden om alles van te creëren coole UI-effecten vervolledigen single-div illustraties. Het opent nieuwe mogelijkheden en geeft een eerste indruk van hoe krachtig CSS werkelijk is.
@media
Oef, ik ben al bij mijn vijfde en laatste item in de lijst en heb het gevoel dat er nog zoveel CSS-goedheid is die hier thuishoort. Maar als ik één laatste ding moet kiezen, dan is het dat wel mediaquery's. Waarom? Omdat het een belangrijk ingrediënt is voor het creëren van vloeiende, flexibele lay-outs en verschillende kijkcontexten. Containervragen zou dit uiteindelijk van mijn lijst kunnen schrappen naarmate het ouder wordt, maar voor nu, @media is een geweldige inleiding voor responsief ontwerp.
Verder dan dat, @media is een mooie eerste stap in de voorwaardelijke kwaliteiten van CSS. Of we een query schrijven op basis van het type apparaat dat wordt gebruikt (bijv. screen or print) of a wanneer de viewport van de browser aan bepaalde criteria voldoet (bijv. width >= 768px), De @media syntaxis is ongelooflijk handig voor het maken van lay-outs die zijn geoptimaliseerd voor verschillende omstandigheden.
Oh, en dan hebben we het nog niet eens gehad over hoe @media heeft betrekking op toegankelijkheid, dankzij het vermogen om pas stijlen toe op basis van de voorkeuren van een gebruiker (Bv prefers-reduced-motion). Dus, naast het maken van voorwaardelijke lay-outs, zijn mediaquery's een mooie volgende stap om inclusief ontwerp te begrijpen.
Eervolle vermeldingen
Het destilleren van CSS in een lijst van vijf onmisbare eigenschappen en selectors is moeilijk, vooral nu CSS tegenwoordig krachtiger is dan pakweg vijf jaar geleden. Er zijn een aantal andere items die ik echt wilde opnemen, zoals (in willekeurige volgorde):
calc()has()colorfontoverflowposition(vooral dit)z-index
Maar ik sta achter mijn keuzes. CSS leren is belangrijker dan het onthouden van een lijst met eigenschappen. Het is een reis en ik denk dat de vijf die ik heb gekozen een leuk klein leerpad vormen dat de weg vrijmaakt voor het schrijven van goede stijlregels en de volgende stappen om dieper in CSS te duiken.
Oké, vertel me de jouwe!
Niet eens met mijn lijst? Je zou moeten! Ik wed dat je een aantal slimme meningen hebt en ik wil zien hoe je een Top 5-lijst zou hebben afgerond.
