Friday Front-End - Issue #273: Why the creator of styled-components loves Tailwind, the 2020 CSS Almanac, alt vs figcaption, scroll-snap, and more!

Tailwind is an atomic CSS framework that has taken the frontend world by storm. It gives developers without a deep understanding of design the ability to build visually gorgeous, modern user interfaces. Many people think Tailwind is cool because it uses atomic CSS. Here is the thing though: Tailwind is awesome despite using atomic CSS, not because of it.

Hear me out.

Assistive technologies need words to interpret an image. People sometimes need words to better understand why an image is being displayed. Luckily we have a few ways to describe them in a human readable manner: alt and figcaption. These items house very different writing patterns though, and can be used both together and apart, depending on the conditions.

Here’s something I find myself needing to do again and again in CSS: completely covering one element with another. It’s the same CSS every time: the first element (the one that needs to be covered) has position: relative applied to it. The second has position: absolute and is positioned so that all four sides align to the edges of the first element. I do it so often that it makes sense to create a utility class that covers it, rather than writing out the CSS properties longhand every time.

How often have you wished if there was a CSS feature that made it easy to create a scrollable container? CSS scroll snap can do that. In this article, I will walk you through CSS scroll snap basics. What’s make me excited is that I just learned CSS scroll snap, so all the details I will explain will be freshly written. Are you ready? Let’s dive in!