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…
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
end rather than physical directions.
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.
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.
Ugh, I’m totally cheating here but think learning
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!
Another one where I’m cheating a bit. Yes,
::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.
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.
@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.,
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.
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):
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.
displayI would throw in:
Those in combination with
display:flexcan help align items in a predictable grid with spacing without needing to rely on any complicated margins, wrappers that use negative padding, etc.
CSS custom properties (variables) are up there for me.
Great list, Geoff! And thanks for the mention.
I think pointer-events, user-select and cursor are important
also the moment you start working on a big project you should start understanding performance focused instructions (contain, content-visibility and will-change)
clamp(min, calc(some..magic..formula), max)
js in css instead of css in js:
flex-props: align-items, justify-content, gap (as Rob already mentioned) modified by media queries
hsl() and hsla(), but I am really eager to start replacing them with the new color-formats, optimized for the human eye like: hwb(), lab() and lch() (and maybe HSLuv ??)
Always and forever on the list: box-sizing: border-box