1: Using :has() As A CSS Parent Selector & Much More — Looks like everyone wanted to play around with the new :has() pseudo-class to see what it unlocked, as this from Jen Simmons in August was our top shared link of the year. This post covers the basics of how to use it as a parent selector, and highlights some great examples of what powerful things you can do with it.

The Bitmovin Video Developer Report Is Back — The community has spoken, and the 6th edition of Bitmovin’s Video Developer Report has arrived. The report offers an excellent snapshot of the trends shaping video's future alongside industry opportunities and challenges. Download your copy now.

Bitmovin Inc. sponsor

2: !important Was Added for One Reason Only: US Law — This March 2022 tweet offered up a bit of historical context and got plenty of attention from Frontend Focus readers. The tweet, from CSS co-designer Steven Pemberton, shared how !important was only added to the spec due to US laws “that require certain text to be in a given font-size”. He adds that anything else is probably misuse. Ernie Smith dug into this a little more here.

Steven Pemberton

3: Explain the First 10 Lines of Twitter's Source Code to Me — This frontend interview question garnered enough interest to get into the top three links of 2022. At first it may seem straightforward enough, but there’s actually plenty to unpack and consider — this interesting CSS-Tricks post from last February goes through things line-by-line.

Anand Chowdhary

4: An Interactive Guide to Flexbox — This interactive explainer from Josh is packed with over 20 demos clearly showing off how Flexbox works. An excellent overview, first shared in November, and an overall sound way to wrap your head around the core functions that flexbox offers.

Josh W. Comeau

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers — High-resolution, crystal-clear screen sharing, low-latency remote control, and less CPU usage than you'd think possible.

Tuple sponsor

5: CSS Container Queries Are Finally Here — Over the summer Ahmad posted this solid overview of how container queries work, how we can use them, what the syntax looks like, and shared a few real-life examples and use cases.

Ahmad Shadeed

6: Lesser-Known And Underused CSS Features — If you missed this first time round, you'll no doubt learn something from this look at which properties and selectors are lesser-known or should be used more often — including the likes of currentColor, scroll-padding, isolation, and more.

Adrian Bece

7: The ‘Form’ Element Created the Modern Web. Was It a Big Mistake? — Plenty of you tapped on this May story exploring the impact of the humble <form> element and how it became something of “a pivot point for the entire technology industry". The author explains how it went on to change the web from a read-only medium to a read-write medium for anything.

Paul Ford

8: A Syntax for CSS Nesting — Thousands of developers helped shape the decisions being made on what the syntax for CSS nesting support should be. This post from October shared some initial results — but that's not the whole story, as the debate now continues with fresh options.

Chrome Developers

React Authentication, Simplified

Userfront sponsor

9: You Don’t Need a UI Framework — Another from Josh (see number 4 above), this time making the case that you might not always need to raech out for Bootstrap, Material UI and the like.

Josh W. Comeau

10: The Web Almanac 2022 — Performance — This chapter from excellent HTTP Archive Web Almanac for 2022 resonated with readers (and rounds out our top ten) — this specific chapter focuses on web performance, specifically looking at Google’s Core Web Vitals solution, and how it has impacted the performance conversation. The full Web Almanac is superb reading and offers a current and rounded view of frontend development.

Melissa Ada & Rick Viscomi