Photo by Pankaj Patel on Unsplash
The web’s visual attractiveness and interactivity are made possible via CSS, which is the language that powers it. While CSS can be incredibly versatile, it can also be quite wordy and challenging to manage due to its flexible nature. That’s where CSS shorthand comes to the rescue.
With CSS shorthand, a single line of code can be used to replace an entire block, and these shorthand properties allow you to alter the values of several CSS properties at once.
Learning to code with CSS shorthand can help save time and space while also making your code more concise and readable. This aids in reducing the size and complexity of CSS files in general.
In this article, we will cover five CSS shorthand approaches that you probably weren’t aware of. By using these techniques, you may not only make your code simpler but also more effective, which will save you time and make your projects easier to manage.
1. Border Shorthand
One of the most commonly used CSS properties is border. You've likely used it to add borders to elements, but did you know there's a shorthand way to set all border properties at once? Let's take a look at how it works.
In the longhand version, we specify the width, style, and color of the border separately.
border-width: 2px;
border-style: solid;
border-color: #000;
However, in the shorthand version, we combine all these properties into a single line.
border: 2px solid #000;
This not only reduces the number of lines in your CSS but also makes it more readable and easier to maintain.
2. Margin and Padding Shorthand
Managing spacing in your layout is a fundamental aspect of web development. You’ve probably used margin and padding extensively.
/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
Here's a shorthand technique that can make your spacing-related CSS much cleaner.
margin: 10px 20px;
Similarly, you can use shorthand for padding in the same manner.
padding: 15px 5px;
The beautiful thing about the shorthand property of margin and padding is that you can even take it a little further by using one line of code to style all four different sides.
Here’s a simple illustration
/* Longhand */
margin-top: 10px;
margin-right: 18px;
margin-bottom: 12px;
margin-left: 15px;
/* Shorthand */
margin: 10px 18px 12px 15px;
Same applies to padding.
One important thing to note is that this shorthand form follows a particularly strict syntax, as all the properties follows a clockwise direction starting from the top > right > bottom > left.
Key Note
- One Value: this means the same value is applied to all four sides
- Two Values: this means the first value applies to the top and bottom while the second value applies to the left and right sides.
- Three Value: First value applies to the top, second value applies to the left and right, while the third value applies to the bottom.
- Four Values: First value applies to the top, second to the right, third to the bottom and the last value applies to the left.
The shorthand versions are not only concise but also more intuitive once you get used to the order (top, right, bottom, left). This simple trick can significantly improve the readability of your CSS.
3. Multiple Background Images
Sometimes, you may want to apply multiple background images to an element. This is where the background shorthand property comes in handy.
/* Longhand */
background-image: url(image1.jpg), url(image2.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
In the longhand version, you specify each background property separately, including the image, position, and repetition.
/* Shorthand */
background: url(image1.jpg) top left no-repeat,
url(image2.jpg) bottom right repeat-x;
The shorthand version allows you to define multiple backgrounds more efficiently by separating them with commas.
This technique is particularly useful when you want to create complex backgrounds for elements, such as buttons or headers, without cluttering your CSS with multiple lines of code.
4. Flex Shorthand
Flexbox is a powerful layout system that simplifies the process of designing flexible and responsive layouts. While mastering Flexbox may take some time, there’s a handy shorthand property that can make your life easier when dealing with flex containers.
This involves the use of flex to set how a flex item will shrink or grow to fit the available space in the flex container, with flex-basis setting the initial size of the flex item which can be a percent or length unit.
The flex property is shorthand for
- Flex-grow
- Flex-shrink
- Flex-basis
/* Longhand */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1em;
/* Shorthand */
flex: 1 1 1em;
This shorthand approach simplifies the process of creating flexible layouts, especially when you need to manage various flex properties simultaneously.
5. Inset Shorthand
The inset shorthand property is a relatively new addition to CSS, but it's a game-changer for handling positioning and sizing of elements. It combines properties like top, right, bottom, and left into a single line, making your CSS more concise and readable.
/* Longhand */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
/* Shorthand */
inset: 10px 20px 10px 20px;
With the inset shorthand property, you can quickly set the position of an element and mange its spacing from all sides without cluttering your code with separate lines for each direction.
Conclusion
CSS shorthand properties and hacks are powerful tools that can streamline your web development workflow. Mastering these techniques can help one write cleaner, more efficient and maintainable CSS code.