You might already be familiar with shorthand CSS rules. They’re handy at reducing the total number of lines of CSS you need to write to achieve a desired appearance.
One of the most common is the padding property. There are multiple shorthand variations, maybe some you’re not familiar with:
# shorthand variants
padding: 1px 2px 3px 4px; # top:1px right:2px bottom:3px left:4px
padding: 1px 2px 3px; # top:1px right:2px bottom:3px left:2px
padding: 1px 2px; # top:1px right:2px bottom:1px left:2px
padding: 2px; # top:2px right:2px bottom:2px left:2px
# longhand
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
This might seem like a really pedantic point to make, and you’re welcome to skip this optional lesson if this level of decision making doesn’t interest you.
When writing my very first component libraries, I was often unsure about which approach to take, so this lesson goes over the two approaches to help you make the right decision for your future libraries.
By going shorthand, you can simplify the API surface of your styles. Instead of requiring a user to remember four different design token names to override some padding, they’ll just need to remember one.