Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that’ve shipped in browsers the past couple of years — container queries! relative color syntax! cascade layers! logical properties! ranges in media queries! individual transforms! :has() selector! — and all of what’s on the possible horizon — CSS Toggles! nesting! color mixing! scroll-linked animations! scoped styles! — there’s definitely a different learning curve for CSS these days for new and seasoned front-enders alike.
There may have been a time when it was possible to know most CSS properties and how they work. Those days are long-gone, at least for an old hand like me. But that sort of begs the question: what CSS do you absolutely have to know?
Vincas Stonys recently took a stab at a list. Chris put one together based on features released since CSS3. You probably have an idea of what you would include in a list. If I had to put a Top 5 together and limit myself to only properties and selectors, it might look something like this…
writing-mode
I can’t say enough about the writing-mode property. What makes it important — especially from a learning perspective — is that it sets you up for inclusive principles that account for crafting layouts, regardless of the user’s language. A good understanding of writing-mode is going to lead to an understanding of logical properties and values, and those, in turn, set the stage for understanding document flow and thinking in terms of block, inline, start, and end rather than physical directions.
display
I have a hard time believing anyone can write good CSS without having a solid grasp on the display property. It’s both a property and a framework for creating layouts. There’s no Flexbox or CSS Grid without it, making it sort of like a gatekeeper to understanding those important features.
Plus, the display property perfectly complements writing-mode. It’s exactly what you’ll need once writing-mode has exposed you to document flow and logical directions. You’re going to need a property to either change an element’s normal flow (like changing a block element to an inline one) or start laying things out (like creating a flexible layout context) and that is where display comes into play.
margin / padding / border
Ugh, I’m totally cheating here but think learning margin, padding, and border together is sort of unavoidable. They’re all parts of The Box Model, all help with spacing and styling, and all require getting acquainted with CSS length units. Knowing what these properties are desgined to do and how they contribute to the computed size of an element certainly gives you a lot more styling control, and dispels any confusion about why an element is the size that it is — a common CSS headache!
::before and ::after
Another one where I’m cheating a bit. Yes, ::before and ::after are two individual pseudo-elements, but again, I can’t imagine learning about one without the other. It’s a two-fer!
I remember how mind-blowing it was for me to learn that these existed and can be used to create everything from cool UI effects to complete single-div illustrations. It opens up new possibilities and provides a first peek at how powerful CSS really is.
@media
Oof, I’m already at my fifth and final item in the list and feel like there’s still so much CSS goodness that belongs here. But if I have to choose one last thing, it would be media queries. Why? Because it’s a prime ingredient for creating fluid, flexible layouts and different viewing contexts. Container queries might wind up knocking this off my list as it matures, but for now, @media is a great primer for responsive design.
Beyond that, @media is a nice first step into the conditional qualities of CSS. Whether we’re writing a query based on the type of device thats being used (e.g., screen or print) or a when the browser’s viewport meets a certain criteria (e.g., width >= 768px), the @media syntax is incredibly useful for creating layouts that are optimized for different conditions.
Oh, and we haven’t even touched on how @media relates to accessibility, thanks to its ability to apply styles based on a user’s preferences (e.g., prefers-reduced-motion). So, in addition to crafting conditional layouts, media queries are a nice next step toward understanding inclusive design.
Honerable mentions
Distilling CSS into a list of five must-know properties and selectors is tough, especially now that CSS more powerful today than it was, say, even five years ago. There are a number of other items I really wanted to include, like (in no particular order):
calc()has()colorfontoverflowposition(especially this)z-index
But I stand by my choices. Learning CSS is more important than memorizing a list of properties. It’s a journey and I think the five I chose carve a nice little learning path that sets the stage for writing good style rules and next steps for diving deeper into CSS.
Alright, tell me yours!
Disagree with my list? You should! I’ll bet you have some smart opinions and I want to see how you would have rounded out a Top 5 list.
What CSS Do You Absolutely Have to Know in 2022?
