Home Blog Holy shit there's so much CSS

Holy shit there's so much CSS






Podcast 1/2
Podcast 2/2


Which unit should I use when?

Rendering Logic

Logical properties/values



If you don’t specify a border-color, it’ll inherit the font’s color by default. This isn’t well-known, but it can be very useful in cases where those things should be synchronised!

Stacking contexts

Stacking contexts inspector

Responsive and Behavioural CSS


The iPhone 12 has a native resolution of 2532×1170 pixels—for context, this is more than most large desktop monitors!
So to account for this mobile devices have a device pixel ratio.
The ratio between the physical LED pixels on the device, and the “theoretical” pixels we use in CSS. On my iPhone, this number is 3. This means that a 10px length will actually be 30px long. Each software pixel actually corresponds to 9 hardware pixels:

(In reality, pixels aren’t tiny squares, but for our purposes, we can pretend they are.)

.box {
    This CSS will ACTUALLY draw a
    150×150 box on a modern iPhone.
  width: 50px;
  height: 50px;
  background: pink;

Media queries


Typography and Images

Images are inline elements “magic space”

Variable fonts are the future

CSS Grid and Flexbox

Flex for 1 dimension and Grid for 2 dimensions.

Gap 👏

Subgrid (soon™️)



Reach for transition when your CSS will change as a result of some application state or user action.

I use it when I want to smooth out an otherwise harsh transition between values.


If an animation needs to run immediately when the page loads or the component mounts, it’s easiest to use @keyframes.

There are some things that only @keyframes can do:

JS libraries

Motion One

Framer Motion

React Spring

GreenSock GSAP

Little Big Details

Increase touch targets

For users using corse pointers (a.k.a mobile users) the minimum recommended size (by Apple) for touch targets is 44px². So ideally you should go through and make sure that all interactive elements are at least that size, but a smart and lazy person thought “no, I don’t wanna do that!” and decided to come up with a way to calculate it automatically using calc and min: https://codepen.io/third774/pen/XWgXZRY.

Generative art with CSS

CSS doodle


Backdrop filters

Layered shadows

No more dull gradients

Scroll snapping

New CSS coming in 2022


Lots of amazing new CSS features coming this year, specifically: