What CSS Do You Absolutely Have to Know in 2022?

The CSS That Still Matters Most

CSS has grown considerably over the past few years, with new features like container queries, cascade layers, logical properties, and the :has() selector arriving in browsers. More is on the horizon, including nesting, color mixing, and scroll-linked animations. For developers just starting out—and even for experienced ones—the expanding landscape raises a legitimate question: which CSS do you genuinely need to know?

There was a time when you could reasonably learn most CSS properties. That era is over. Distilling the language down to a handful of truly essential pieces requires hard choices, but a short list of fundamentals can still provide a strong foundation for everything else.

Start with writing-mode

The writing-mode property might seem like an odd first pick, but it shapes how you think about layout. Understanding it introduces the concept of document flow in terms of block and inline axes, rather than physical directions like top and left. That mental shift is also what leads to logical properties and values, which are increasingly important for building layouts that adapt to different languages and writing systems.

Once you grasp writing-mode, you begin to see layout as something that respects the user's language and content direction—a principle that informs inclusive design and carries through to more advanced CSS concepts.

How display shapes layout

It's difficult to write competent CSS without a firm grasp of the display property. It functions both as a simple property and as the foundation for entire layout systems. Flexbox and CSS Grid are both activated through display, making it the gateway to those powerful tools.

Pairing display with writing-mode makes sense: once you're thinking in terms of document flow and logical directions, display is what you'll use to alter that flow or establish a new layout context. Whether you're changing a block element to an inline one or creating a flexible container, display is the mechanism.

The box model trio

While technically three separate properties, margin, padding, and border are best learned together. They function as the core of the CSS box model, which determines how every element is sized and spaced. Understanding what each property does—and how it contributes to an element's computed dimensions—clears up many common frustrations about why elements end up larger than expected.

These properties also require familiarity with CSS length units, which adds another layer of essential knowledge. Together, they give you precise control over spacing and styling while demystifying how the browser calculates an element's final size.

Pseudo-elements: ::before and ::after

It's practically impossible to learn one without the other. These two pseudo-elements generate content entirely through CSS and open up creative possibilities that go far beyond simple text styling. They can create everything from decorative UI touches to complex single-element illustrations.

For many developers, discovering these pseudo-elements is an early lesson in how expressive CSS can be. They provide a first glimpse into the language's power without requiring any JavaScript.

@media and conditional styling

Media queries round out the list because they enable fluid, flexible layouts that respond to different viewing contexts. While container queries may eventually replace @media as the go-to tool for responsive design, understanding @media today still serves as an excellent introduction to responsive thinking.

Beyond viewport-based breakpoints, @media also handles conditions like device type (screen versus print) and viewport dimensions using range syntax such as width >= 768px. It also supports accessibility through features like prefers-reduced-motion, which let you adapt styles to user preferences. Media queries are a solid starting point for both conditional CSS and inclusive design practices.

What didn't make the cut

Choosing just five must-know items leaves many valuable features on the table. Strong honorable mentions include calc(), :has(), color, font, overflow, position, and z-index.

The goal isn't to memorize an exhaustive list of properties. Learning CSS is a gradual process, and the fundamentals above create a learning path that builds toward more advanced topics. Starting with these core concepts sets you up to write better style rules and explore the language's deeper capabilities with confidence.