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.