Quick Tip: Nest Related Properties for More Readable CSS

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.