Reading Time: 10 mins
Are you tired of writing multiple CSS declarations for related properties? Your stylesheets might be unnecessarily bloated and difficult to maintain. Many developers struggle with CSS verbosity, leading to larger file sizes and harder-to-read code.
In this comprehensive guide, we’ll explore what are shorthand properties in CSS and how they can transform your coding workflow. By the end of this article, you’ll understand how to write more concise, efficient, and maintainable CSS that will streamline your development process and improve your website’s loading speed.
Shorthand properties in CSS are special properties that let you set the values of multiple related CSS properties simultaneously using a single declaration. Think of them as convenient “macros” that expand into several individual (longhand) property settings behind the scenes.
Instead of writing multiple lines of CSS for related properties, shorthand properties allow you to combine these values into a single, space-saving line. This approach not only makes your code more concise but also more readable once you understand the syntax patterns.
For example, instead of writing:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
You can simply write:
margin: 10px 15px;This single line accomplishes the same styling but with considerably less code.
Understanding what are shorthand properties in CSS is just the beginning. Here’s why you should incorporate them into your development workflow:
Now that we understand what are shorthand properties in CSS, let’s explore the most commonly used ones and how they work:
The background property is one of the most powerful shorthand properties, combining up to eight background-related properties:
Longhand version:
background-color: #000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-origin: border-box;
background-clip: padding-box;
background-attachment: fixed;
Shorthand version:
background: #000 url('image.jpg') no-repeat center/cover border-box padding-box fixed;
Order of values: color, image, repeat, position/size, origin, clip, attachment
The font property combines six font-related properties:
Longhand version:
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
Shorthand version:
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
Order of values: style, variant, weight, size/line-height, family
Note: When using the font shorthand, you must specify at least the font-size and font-family values.
Border shorthand has multiple levels:
Full border shorthand:
border: 1px solid #000;
Individual sides shorthand:
border-top: 2px dashed red;
border-right: 3px dotted blue;
border-bottom: 4px double green;
border-left: 5px groove yellow;Individual properties shorthand:
border-width: 1px 2px 3px 4px; /* top, right, bottom, left */
border-style: solid dashed dotted groove;
border-color: red blue green yellow;Both margin and padding properties follow the same pattern for setting values on all four sides of an element:
One value: applies to all four sides
margin: 10px; /* all sides 10px */Two values: first for top/bottom, second for right/left
padding: 10px 20px; /* top & bottom 10px, right & left 20px */
Three values: first for top, second for right/left, third for bottom
margin: 10px 20px 30px; /* top 10px, right & left 20px, bottom 30px */Four values: top, right, bottom, left (clockwise from top)
padding: 10px 20px 30px 40px; /* top 10px, right 20px, bottom 30px, left 40px */The flex shorthand combines three properties that control how flex items grow and shrink:
Longhand version:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;Shorthand version:
flex: 1 1 200px;Order of values: grow, shrink, basis
There are also several preset values:
flex: initial = flex: 0 1 autoflex: auto = flex: 1 1 autoflex: none = flex: 0 0 autoflex: 1 = flex: 1 1 0%The animation property combines eight animation-related properties:
Longhand version:
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;Shorthand version:
animation: slide 3s ease-in-out 1s infinite alternate forwards running;
Order of values: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state
The list-style property combines three list-related properties:
Longhand version:
list-style-type: square;
list-style-position: inside;
list-style-image: url('bullet.png');
Shorthand version:
list-style: square inside url('bullet.png');
Order of values: type, position, image
Similar to border, the outline property combines three outline-related properties:
Longhand version:
outline-width: 2px;
outline-style: dashed;
outline-color: blue;
Shorthand version:
outline: 2px dashed blue;
Order of values: width, style, color
The text-decoration property combines up to four text decoration properties:
Longhand version:
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
Shorthand version:
text-decoration: underline wavy red 2px;
Order of values: line, style, color, thickness
The transition property combines four transition-related properties:
Longhand version:
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0.1s;
Shorthand version:
transition: opacity 0.3s ease-in 0.1s;
Order of values: property, duration, timing-function, delay
Now that you understand what are shorthand properties in CSS, follow these best practices for optimal implementation:
When you use shorthand properties, omitted values revert to their default settings, which might override previously set values:
/* This sets background-color and resets all other background properties to defaults */
background: blue;
Choose the right level of shorthand for your needs:
/* Full shorthand when setting multiple properties */
margin: 10px 20px 30px 40px;
/* Individual properties when only changing one aspect */
margin-top: 15px;
Choose one approach and stick with it throughout your codebase:
/* Either use this consistently */
padding: 10px 20px;
/* Or this, but don't mix styles without reason */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Add comments for complex or unusual shorthand usage:
/* top: 10px, right/left: auto (center), bottom: 20px */
margin: 10px auto 20px;
Remember that shorthand properties can affect specificity and inheritance behavior:
/* This might accidentally override specific font properties set elsewhere */
.element {
font: 16px Arial, sans-serif; /* Resets all other font properties */
}
Even when you know what are shorthand properties in CSS, these common pitfalls can cause unexpected results:
Mistake:
.element {
border-left: 2px solid blue;
/* This overrides the border-left setting above */
border: 1px solid black;
}
Fix:
.element {
border: 1px solid black;
/* Apply specific override after the shorthand */
border-left: 2px solid blue;
}
Mistake:
/* Missing font-family, which is required */
.element {
font: italic bold 16px; /* Invalid, will be ignored */
}
Fix:
.element {
font: italic bold 16px Arial, sans-serif;
}
Mistake:
/* Incorrect order: timing function before duration */
.element {
transition: opacity ease-in 0.3s;
}
Fix:
.element {
transition: opacity 0.3s ease-in;
}
Mistake:
/* This won't work as expected */
.element {
background: url('image.jpg') cover;
}
Fix:
.element {
background: url('image.jpg') center/cover;
}
Mistake:
.element {
background-position: bottom right;
/* This unintentionally resets the position to default (top left) */
background: url('image.jpg');
}
Fix:
.element {
/* Include all desired properties in the shorthand */
background: url('image.jpg') no-repeat bottom right;
}
When using shorthand properties, keep these compatibility considerations in mind:
Most basic shorthand properties have excellent browser support, but newer ones may require vendor prefixes or fallbacks:
.element {
/* Fallback for older browsers */
background: #000 url('image.jpg') no-repeat center top;
/* Modern property with additional values */
background: #000 url('image.jpg') no-repeat center top/cover;
}
Grid and Flexbox shorthands can have varying support across browsers:
.element {
/* Longhand for better compatibility */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "header header" "nav main" "footer footer";
/* Shorthand with potentially less support */
grid-template: "header header" auto
"nav main" 1fr
"footer footer" auto / 1fr 1fr;
}
Always test your shorthand properties in multiple browsers, especially for complex configurations.
Understanding what are shorthand properties in CSS also means knowing when to use them:
/* Good shorthand usage */
.button {
margin: 10px 15px;
padding: 8px 12px;
background: #3498db linear-gradient(to bottom, #3498db, #2980b9);
border: 1px solid #2980b9;
}
/* Good longhand usage */
.button:hover {
background-color: #2980b9; /* Only changing color, not other background properties */
border-bottom-width: 3px; /* Only changing one aspect of the border */
}
Several tools can help you master what are shorthand properties in CSS:
Sass, LESS, and Stylus offer mixins and functions that can generate shorthand properties:
// Sass mixin for margin shorthand
@mixin margin($top, $right, $bottom, $left) {
margin: $top $right $bottom $left;
}
.element {
@include margin(10px, 20px, 10px, 20px);
}
Tools like Prettier, Stylelint, and CSS Comb can automatically format your CSS and enforce consistent shorthand usage:
// Stylelint configuration example
{
"rules": {
"shorthand-property-no-redundant-values": true,
"declaration-block-no-redundant-longhand-properties": true
}
}
Many code editors offer snippets and extensions for quickly generating CSS shorthand:
Several websites can convert between longhand and shorthand CSS:
Understanding what are shorthand properties in CSS is an essential skill for any web developer who wants to write more efficient, maintainable code. These time-saving features allow you to express complex styling instructions with minimal syntax, reducing file sizes and improving productivity.
From backgrounds to animations, borders to transitions, CSS shorthand properties offer a powerful way to streamline your stylesheets. By mastering the patterns, order of values, and best practices discussed in this guide, you’ll be able to write cleaner, more professional CSS.
Remember that like any powerful tool, shorthand properties require knowledge and practice to use effectively. Take time to understand the default values, practice the syntax patterns, and choose the right level of shorthand for your specific needs.
Ready to optimize your CSS? Start by reviewing your existing stylesheets and identifying opportunities to implement shorthand properties where appropriate. Your code will be more concise, your files smaller, and your development process more efficient.
Not necessarily. Shorthand properties are excellent for setting multiple related values but can be problematic when you only need to change one specific property. They’re tools to be used appropriately based on your specific needs.
Yes, in a positive way. Shorthand properties result in smaller file sizes, which leads to faster download times. They can also potentially improve parsing efficiency since browsers need to process fewer declarations.
Omitted properties in a shorthand declaration are set to their initial values. This means they can override previously set values, which is an important consideration when using shorthand.
Yes, CSS variables (custom properties) can be used within shorthand properties:
:root {
--main-color: blue;
--main-padding: 20px;
}
.element {
background: var(--main-color) url('image.jpg');
padding: var(--main-padding);
}
CSS preprocessors generally treat shorthand properties the same way browsers do. However, they often provide additional functions and mixins that can make working with them even easier.
For properties that require vendor prefixes, you’ll need to repeat the shorthand for each prefix:
.element {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Using tools like Autoprefixer can automate this process.
No, there isn’t a specific shorthand for top, right, bottom, and left properties. These must be specified individually or through a utility class in a framework.
Yes, shorthand properties work the same way inside media queries as they do elsewhere in your CSS:
@media (max-width: 768px) {
.element {
margin: 5px;
padding: 10px 15px;
}
}
