article.alt Article last updated: December 18, 2021

CSS Rules! 2021

A quick list of the best CSS properties that I learned in 2021.

What can I say, I like CSS

Every year I learn more and more about it, build increasingly interesting and complex layouts with it, and learn about exciting new features coming down th pipeline. I remember thinking about some of this stuff on this list last year and being excited about using it. I'll include a few properties at the end of this article that will probably hit browsers in 2022, that I am excited about in the same way.

There is really no set criteria for this list, other than that I used it and am excited about. Some of it has been available in browsers for quite a while and solves an everyday problem, other rules would only be used in specialized cases, and just hit browsers recently.

A big part of what inspired this article was the State of CSS 2021 survey. It's a great reference that shows me the areas of CSS I still have to explore and what upcoming features I should learn. I participated in the survey in 2020 and many of the properties on this list I was inspired to learn because of it. I'd highly recommend taking a look at the results from this year, and participating in State of CSS 2022!

1) CSS Grid

CSS Grid spec level 1 has been around for a while, but until recently I was worried about browser support. It wasn't until I watched some Layout Land videos with Jenn Simmons that I learned the main features of grid were actually released to almost immediate full browser support in 2017. There was nothing to be worried about so I just dove in. Those Layout Land videos really helped me get up to speed, as well as from Wes Bos.

I was so inspired that I ended up creating a demo app on and slideshow on CodePen that I presented to my coworkers to push adoption of Grid at my current job. Check them out below:

See the Pen CSS Grid Slideshow by Zack Shave (@zackshave) on CodePen.

2) Position: Sticky

Like every front end focused developer, I've probably implemented 100+ different variations of the classic sticky header pattern. At it's simplest, it could be accomplished with position: fixed, but what if you need to scroll down before the sticky UI kicks in? Or if you need to "catch" an element halfway down the page and make it stick? This used to take some JavaScript, with calculations on the height of the sticky element and the distance from the top of the browser, or in more recent years, something like the Intersection Observer API.

With position: sticky; you can now accomplish this classic UI pattern with just a few lines of CSS. One thing I would like to see is some kind of JavaScript event that you could hook into here for more complex sticky behavior, but you can still use Intersection Observer to accomplish this easily in most cases. Overall, a welcome addition to the CSS spec! Check out the simple demo below:

See the Pen Simple CSS-Only Sticky Header by Zack Shave (@zackshave) on CodePen.

3) Scroll Snap

Scroll snap is something that I think really helps bring an app-like experience to the web. I love the new UI pattern that uses display: flex; and overflow: scroll to to simply allow items that don't fit in a container to become, allowing the user to scroll horizontally when with their thumb or mouse-wheel to access the hidden items. I think this makes so much more sense than completely changing the interface for a user between desktop and mobile devices. It's also much easier to implement for developers, and much more performant at a time when we're all obsessing over technical SEO. Scroll snap arrived just in time to make this style of UI feel smoother and more native, and I try to use it wherever I can.

See the Pen Horizontal Scroll Snap by Zack Shave (@zackshave) on CodePen.

Honorable mentions goes to aspect ratio and fluid typography using clamp(). Honestly I wanted to write about these two properties as well, but this article is already so long I doubt many people will get through it. 😅


Some properties I am excited about trying out in 2022:

  1. Container queries

  2. Subgrid

  3. Perspective