Sacha Greif brazenly puzzled whether or not CSS has gotten to be, you realize, too massive. With all of the goodies that’ve shipped in browsers the previous couple of years — container queries! relative coloration 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! coloration mixing! scroll-linked animations! scoped kinds! — there’s positively a distinct studying curve for CSS as of late for brand spanking new and seasoned front-enders alike.
There could 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 outdated hand like me. However that type of begs the query: what CSS do you completely must know?
Vincas Stonys just lately took a stab at an inventory. Chris put one collectively based mostly on options launched since CSS3. You in all probability have an concept of what you would come with in an inventory. If I needed to put a Prime 5 collectively and restrict myself to solely properties and selectors, it would look one thing like this…
writing-mode
I can’t say sufficient in regards to 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. An excellent 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 movement and considering by way of block, inline, begin, and finish slightly 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 movement and logical instructions. You’re going to wish a property to both change a component’s regular movement (like altering a block factor to an inline one) or begin laying issues out (like creating a versatile format 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 components of The Field Mannequin, all assist with spacing and styling, and all require getting acquainted with CSS size items. Figuring out what these properties are desgined to do and the way they contribute to the computed dimension of a component definitely offers you much more styling management, and dispels any confusion about why a component is the dimensions that it’s — a typical 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 keep in mind how mind-blowing it was for me to study that these existed and can be utilized to create all the things 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 remaining merchandise within the checklist 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 could be media queries. Why? As a result of it’s a primary ingredient for creating fluid, versatile layouts and totally different viewing contexts. Container queries may wind up knocking this off my checklist 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 system 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 are 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 an inventory of 5 must-know properties and selectors is hard, particularly now that CSS extra highly effective right this moment than it was, say, even 5 years in the past. There are a variety of different objects I actually wished to incorporate, like (in no specific order):
calc()has()colorationfontoverflowplace(particularly this)z-index
However I stand by my selections. Studying CSS is extra essential than memorizing an inventory of properties. It’s a journey and I feel the 5 I selected carve a pleasant little studying path that units the stage for writing good type guidelines and subsequent steps for diving deeper into CSS.
Alright, inform me yours!
Disagree with my checklist? It is best to! I’ll wager you have got some good opinions and I need to see how you’ll have rounded out a Prime 5 checklist.
