When to use (and not use) CSS shorthand properties
We're live
Live on Twitch!
thoughtbot is livestreaming
Work alongside the thoughtbot team as we collaborate with each other and our clients, live. Ask us anything, we're live right now!
Menu
Let’s get started!
Back
View all Services
Development
Ruby on Rails
Hotwire
AI and Machine Learning
Maintenance
Mobile
Design
Shaping Sprints
UX, UI, and Product Design
Design Systems
Product
MVP
Product Management
Accessibility
Team and Processes
Team Augmentation
Fractional Leadership
View all Services
Back
Healthcare
Finance
Insurance
Back
View all Resources
Development
Tech Leadership Resources
Open Source
Books
The Bike Shed Podcast
Live Streaming on YouTube
Conference Talks
The business of great software
Playbook
Giant Robots Smashing Into Other Giant Robots Podcast
Design Sprint Guide
Live Streaming on LinkedIn
View all Resources
Ana Tudor posted about this recently and I agree: CSS shorthand properties are genuinely useful, but they’re not universally applicable. There are no hard and fast rules here. The question to ask yourself isn’t “can I shorthand this?” but “will someone reading this later, including future me, understand what’s happening?” It comes down to readability and intention, and those are going to look different for everyone. Verbosity isn’t always the enemy.
What’s a shorthand property?
CSS shorthand properties let you set a bunch of related values in a single declaration. There are quite a few of them, some more widely used than others.
One you may be familiar with is the background property, which can set the image source, position, size, repetition rules, origin, color, clip threshold, and scroll behavior all at once:
.selector {<br>background: url(“/images/my-image.jpg”) 1rem 1rem / 50% 75% no-repeat fixed content-box padding-box orange;
Do you know what each of those values corresponds to? Some are obvious. orange is clearly the background color, and the URL is the image. But the numeric values and the content-box/padding-box pair? I have to look those up every single time.
That’s exactly the kind of situation where I’d rather just write it out.
When to use it, when to skip it
When the ordering is intuitive
Directional properties like padding and margin are generally fine to shorthand. I’ve committed the ordering to memory (clockwise from the top side), which is what makes them feel safe. The number of values determines what gets applied.
One value applies to all four sides:
.selector {<br>padding: 1vw;
Two values split into y-axis then x-axis:
.selector {<br>padding: 1px 10%;
Four values apply clockwise from the top (top, right, bottom, left):
.selector {<br>padding: 1rem 10rem 3rem 2rem;
The three-value version, though? I always forget that the second value applies to both right and left. I’d rather write them out individually than trip over that every time I read it back.
So this:
.selector {<br>padding: 1px 5rem 2rem;
Becomes this:
.selector {<br>padding-bottom: 2rem;<br>padding-left: 5rem;<br>padding-right: 5rem;<br>padding-top: 1px;
An even more resilient pattern is to use logical properties rather than strict directional ones, to account for layout changes across different languages and writing modes. In a left-to-right language like English, padding-inline maps to left and right, and padding-block maps to top and bottom. In a right-to-left language like Arabic, the inline axis flips.
You can get more specific with padding-inline-start, padding-inline-end, padding-block-start, and padding-block-end to target individual sides. In this example, a left-to-right reader sees 2rem on the left and 6rem on the right; a right-to-left reader sees those values swapped, with the same top and bottom padding either way:
.selector {<br>padding-block: 10%;<br>padding-inline-start: 2rem;<br>padding-inline-end: 6rem;
border-radius falls into this category, too. One value applying to all four corners is intuitive enough that shorthand may be fine:
.selector {<br>border-radius: 8px;
And when we have a variety of values, it’s good to know what we intend with longhand syntax. Sometimes I’ll even write out a zero-ed out property (like border-bottom-right-radius) in this example to communicate exactly what’s needed for this element’s shape:
.selector {<br>border-top-left-radius: 2rem;<br>border-top-right-radius: 8rem;<br>border-bottom-right-radius: 0;<br>border-bottom-left-radius: 5px;
When each value is a distinct type
transition and animation are both shorthands that pack in a lot: duration, easing, delay, and the property being targeted. For simple cases, the shorthand may hold up when each value is a distinct type: a name, a duration, an easing function.
This example may be easier to parse without ambiguity:
.selector {<br>animation: spin 1s ease-in-out;
But even when the types are distinct, ordering can become its own problem at scale. If one part of...