Quick Tip: Nest Related Properties for More Readable CSS

Matt Sisto
Nov 5, 2015 · 1 min read

I sort CSS properties alphabetically. My editor does work and things are always where I expect them. One downside is that related or dependent properties are usually not neighbors.

Check out this snippet for a full-screen overlay:

.overlay {
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 9000;
}

That bit manages the positioning, but the design calls for a semi-transparent background and a slick transition in:

.overlay {
animation: overlay-in 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
background-color: #fff;
bottom: 0;
left: 0;
opacity: 0;
overflow: auto;
padding: 1rem;
position: fixed;
right: 0;
top: 0;
transform: scale(0.5) translateY(10%);
z-index: 1000;
}

Seems like a lot to take in for such a simple pattern, right? To my eye, blocks with nested related properties are much easier to grok.

.overlay {
animation: overlay-in;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
background-color: #fff;
opacity: 0;
overflow: auto;
padding: 1rem;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform:
scale(0.5)
translateY(10%);
z-index: 1000;
}

There are a few exceptions. When nested, I sort top, right, bottom, and left in that order because it’s consistent with shorthand declarations like with margin and padding.

Intensive Code Unit

Iora Health Engineering

Matt Sisto

Written by

Designer at Upserve

Intensive Code Unit

Iora Health Engineering