Sacha Greif overtly questioned whether or not CSS has gotten to be, you recognize, too huge. With all of the goodies that’ve shipped in browsers the previous couple of years — container queries! relative colour syntax! cascade layers! logical properties! ranges in media queries! particular person transforms! :has() selector! — and all of what’s on the attainable horizon — CSS Toggles! nesting! colour mixing! scroll-linked animations! scoped kinds! — there’s positively a special studying curve for CSS today for brand spanking new and seasoned front-enders alike.
There might have been a time when it was attainable to know most CSS properties and the way they work. These days are long-gone, not less than for an previous hand like me. However that type of begs the query: what CSS do you completely need to know?
Vincas Stonys just lately took a stab at a listing. Chris put one collectively based mostly on options launched since CSS3. You most likely have an thought of what you would come with in a listing. If I needed to put a High 5 collectively and restrict myself to solely properties and selectors, it would look one thing like this…
writing-mode
I can’t say sufficient concerning the writing-mode property. What makes it essential — particularly from a studying perspective — is that it units you up for inclusive rules that account for crafting layouts, whatever the consumer’s language. A great understanding of writing-mode goes to result in an understanding of logical properties and values, and people, in flip, set the stage for understanding doc circulation and pondering when it comes to block, inline, begin, and finish relatively than bodily instructions.
show
I’ve a tough time believing anybody can write good CSS with out having a stable grasp on the show property. It’s each a property and a framework for creating layouts. There’s no Flexbox or CSS Grid with out it, making it type of like a gatekeeper to understanding these essential options.
Plus, the show property completely enhances writing-mode. It’s precisely what you’ll want as soon as writing-mode has uncovered you to doc circulation and logical instructions. You’re going to wish a property to both change a component’s regular circulation (like altering a block component to an inline one) or begin laying issues out (like creating a versatile structure context) and that’s the place show comes into play.
margin / padding / border
Ugh, I’m completely dishonest right here however assume studying margin, padding, and border collectively is type of unavoidable. They’re all elements of The Field Mannequin, all assist with spacing and styling, and all require getting acquainted with CSS size models. Understanding what these properties are desgined to do and the way they contribute to the computed dimension of a component definitely provides you much more styling management, and dispels any confusion about why a component is the dimensions that it’s — a standard CSS headache!
::earlier than and ::after
One other one the place I’m dishonest a bit. Sure, ::earlier than and ::after are two particular person pseudo-elements, however once more, I can’t think about studying about one with out the opposite. It’s a two-fer!
I bear in mind how mind-blowing it was for me to be taught that these existed and can be utilized to create all the pieces from cool UI results to finish single-div illustrations. It opens up new prospects and supplies a primary peek at how highly effective CSS actually is.
@media
Oof, I’m already at my fifth and closing merchandise within the listing and really feel like there’s nonetheless a lot CSS goodness that belongs right here. But when I’ve to decide on one very last thing, it might be media queries. Why? As a result of it’s a chief ingredient for creating fluid, versatile layouts and totally different viewing contexts. Container queries would possibly wind up knocking this off my listing because it matures, however for now, @media is a superb primer for responsive design.
Past that, @media is a pleasant first step into the conditional qualities of CSS. Whether or not we’re writing a question based mostly on the kind of machine thats getting used (e.g., display screen or print) or a when the browser’s viewport meets a sure standards (e.g., width >= 768px), the @media syntax is extremely helpful for creating layouts which might be optimized for various circumstances.
Oh, and we haven’t even touched on how @media pertains to accessibility, because of its skill to apply kinds based mostly on a consumer’s preferences (e.g., prefers-reduced-motion). So, along with crafting conditional layouts, media queries are a pleasant subsequent step towards understanding inclusive design.
Honerable mentions
Distilling CSS into a listing of 5 must-know properties and selectors is hard, particularly now that CSS extra highly effective right now than it was, say, even 5 years in the past. There are a selection of different gadgets I actually needed to incorporate, like (in no explicit order):
calc()has()colourfontoverflowplace(particularly this)z-index
However I stand by my selections. Studying CSS is extra essential than memorizing a listing of properties. It’s a journey and I believe the 5 I selected carve a pleasant little studying path that units the stage for writing good fashion guidelines and subsequent steps for diving deeper into CSS.
Alright, inform me yours!
Disagree with my listing? It’s best to! I’ll guess you will have some sensible opinions and I need to see what how you’d have rounded out a High 5 listing.
