Whether you’re building your frontend with HTML or React frameworks, styles remain the beautification component of your application.

Speaking of CSS, one of the gaps between junior and senior frontend engineers is the understanding of shorthand.

First of all, it helps you write shorter and cleaner code. After all, why should you use 7 lines instead of 1?

Secondly, it shows you have a better grasp of how CSS and browsers work.

Hence, you have to master CSS Shorthand. In this tutorial, you’ll learn how to shorten the styles of your margin, padding, background, and other aspects of your decoration.

Such that in your next web development projects, you’ll write cleaner styles with shorthand.

18 Powerful CSS Shorthand Properties to Know

Here are some incredible shorthands that will take your styling to the next level.

Margin

We use margin to create space on the outside of an element. Meaning that the effect of the margin is seen around an element we are working on.

The value can be anything from:

• auto: left for the browser to decide
• inherit: by law of inheritance, the child element should have the properties of the parent element
• percentage: calculates the width of the element in percentage
• length: to calculate the margin in pixels, centimetres, or similar values

That said, the browser calculates margin, once it’s specified, in a clockwise direction. Thus, it goes from top => right => bottom => left. In that order.

Ideally, the shorthand should be applied to the four areas for clarity. Like this:

margin:10px20px30px40px;

Meanwhile, there will be different decorations if not up to four, but more than one values are given.

First, if you give two values, it will be calculated thus:

• first value is for the top and bottom
• second value is for right and left

Secondly, if you give three values, the one in the middle will apply to the right and left.

Padding

Earlier, we discussed margin. If you understand it correctly, flip it over, and you get padding.

In essence, padding is the decoration property used to create space within an element.

There is one thing you must know about the values of padding: it doesn’t haveauto, unlike margin.

All four corners of an element can be padded. You can write a shorthand of this by spelling out the padding decoration in a clockwise direction. Like this:

padding:10px20px;

Just like margin, specification of 2 values means the first one will apply to top and bottom, and the second will apply to both sides.

Background

The simplest way to create a background is to simply say the background color should be black or whatever color of your choice.

This is where CSS gets interesting. There are many ways you can style up your background aside color.

This includesposition,repeat, andattachment. If you want to go into this level of detail in your backgrounds, you’d have to define a lot of things.

And this is where shorthand makes background properties simpler to write at a go.

Emphatically, there is an order to CSS backgrounds; you have to be conscious of it.

• color
• image
• repeat
• attachment
• position

Example:

background:#fffurl("developer.jpg")repeatcentercenter/cover;

By the way, there are other properties for backgrounds which are not in this order. They are quite rarely used ones you’d have to input with longhand.

Border

A border is the demarcation around an element. By the way, every element has a bother, whether or not you specify it.

Interestingly, you can set a border to none. There are different ways borders can appear:

• solid
• groove
• inset
• double
• dotted, and so on

That said, when we say border, it is a single name that refers to a collection of properties. It contains:

• width
• style
• color

In that order. Among these three, the most important is style. You can write shorthand for the border, and the decorations will be applied in all directions.

Also, you can selectively write a shorthand of the border to a particular side, such as this:

border:10pxsolidblue;

Border-radius

Border-radius bring more life to your elements. Essentially, you can use border-radius to create rounded corners.

It’s calculated in an anti-clockwise manner. Such that the first value will go to the first angle by the top-left, and so on.

When you shorthand border-radius, you should spell out all four values. Like this:

border-radius:15px10px15px10px;

Other than that, there will be a different decoration.

In the case of three values: the first value will apply to the first angle, the second will apply to second and third angle, while the third value will apply to the fourth angle.

Outline

An outline is an external line—for the lack of a better word—on the outside of an element, and is immediately after the border.

You might be like, “Well, that sounds like what the borders do?” That’s a brilliant observation.

Here is what you need to know: borders are quite part of the element. In contrast, outlines are external and not part of the element’s box. Hope that clarifies it.

That said, there are 3 properties of an outline:

• Color
• Width
• Style

The order doesn’t matter in the instant case, meaning you can say:

outline:2pxdashedblue;

Or write it as:

outline:2pxbluedashed;

And both will do the same thing.

Overflow

In reality, there are times you will want to fit some content into your card components, and they will overlap, thus making your website look disorganized and unprofessional.

In such cases, you can use overflow to gracefully contain the mishap.

Generally, it has a couple of properties, including visible, hidden, auto, clip and scroll.

That said, overflow is calculated graphically as we have bothx andy axes.

As a result, here is how you can shorthand both axes with the available properties:

overflow:hiddenscroll;

Gap

When we’re talking ofgap in Nextjs or CSS, we practically use it in grid or flexbox.

If you’re a senior engineer reading this, you should remember the time ofgrid-row-gap andgrid-column-gap. They were deprecated for what we now know as the grid today.

Unlike overflow, which is graphical, the grid is theoretically tabular. Meaning it works in rows and columns.

The order is that rows come before columns; keep that in mind. Therefore, instead of writing:

row-gap:30pxcolumn-gap:20px

You can shorthand it as:

gap:30px20px;

Font

For engineers who want to have a greater level of specificity in their typography, you will want to outline many properties you want in your fonts.

Meanwhile, it can be quite lengthy. One thing you should keep in mind is that you must always include size and family in your font family for it to be successfully shortened.

So you can have something like:

font:boldsmall-capsbold16px/1.5Calibri;

List

If you have a fair HTML background, you’ll agree that the major types of lists we have are ordered and unordered lists.

CSS takes it a notch higher by adding other properties to make lists more attractive. The first property isstyle. In practice, this is a glorified bullet, but with other specs.

For instance, you can set the style to square, and the list will appear with a square-shaped bullet.

Secondly, there is theimage-property. This allows you to customize the listing with any image of your choice.

Finally, there isposition, which can either be outside or inside. The former will create a tab after the bullet, while the latter will vertically align all the items in the list.

Here is an example:

list-style:roundinsideurl('exampl.png');

Flex

For you to use flex, there has to be a container or a card. Now, whatflex does is to control the items within the container so they can behave properly and fit gracefully into the container.

There are 3 properties you’ll need to set. The first isflex-grow. It is the determinant of how much space an item can have within a container.

Secondly, there isflex-shrink. This relates to how much an item should minimise itself about other items within the container.

Finally, we haveflex-basis. This works more like length. Thus, its value can be auto, inherit, or in pixels. Here is an example:

flex:1020px;

Mask

Masks allow you to get creative with your images. For example, you can have a triangle and mask an image on it.

This will make the image fit into the triangle and appear as such.

In reality, you most likely wouldn’t need many other properties of a mask, just the simple one will do.

But for edge cases, here are some of its properties you should know: size, repeat, position, and image. By the way,image is the most important of them all.

Here is an example of the shorthand:

mask:url(example.png)repeatcenter;

Animation

By enabling animations, you can add spicy effects to your elements by putting them be on motion.

Animation has different properties you can include, such as duration, delay, and direction. There’s no strict order.

This is an example of how to shorthand animated elements:

animation:slideIn1sease-in,fadeIn2slinear1s;

Transition

One of the ways to make your buttons and cards grab user attention is by understanding how to use transitions well.

It is mostly used for hovers. There are different properties in transition. But the most important ones are delay and duration.

Let me show you how to spell out all your transition properties in a single line:

transition:opacity0.5sease,transform1slinear;

Grid

If you understand this grid shorthand, it will save you a lot of time manually inputting many grid properties.

You must have been familiar withgrid-template-column,grid-template-row,grid-auto-flow and so on.

With grid shorthand, you can easily specify rows and columns at a single go, like this:

.container{display:grid;grid:10px20px/2fr2fr;}

Inset

Inset, in itself, is a shorthand.

The orthodox approach is to set the values of all four sides of a container or card. For example, you can say:

• top: 10px
• left: 10px
• bottom: 10px
• right: 10px

Meanwhile, this could have been simplified by using an inset, as in:

.card{inset:10px;}

As you can see,inset helps you set all the required positions of an element with a single strike!

Columns

This is very straightforward to grab. As you’re aware, you can choose to outline some parts of your frontend on a columnar basis.

There are two essential components involved:column-width andcount.

The former deals with the horizontal length of your outlook, while the latter defines the number of columnal arrangements that can be.

Thus, here is a shorthand of the columns property:

columns:auto4;

Text-decoration

Your applications will look spicier if you take the text styling to the next level.

This is where text-decoration might be helpful; it simply makes your text more beautiful.

There are different properties such as color, thickness, and style. Most importantly, you must indicate the decoration line.

Here is an example of how to shorten it:

text-decoration:underlinewavyblue5px;

Performance & Maintenance Drawbacks of CSS Shorthand

So far, we have examined smart ways to write CSS with shorthands. However, it’s not all as shiny as it seems, and this is where you need to pay attention.

First of all, new engineers on your team might not fully understand some of the properties you have heavily abbreviated, especially when it relates to edge-cases.

For this reason, some engineering teams often prefer to keep things orthodox; in this instance, to write everything longhand and straightforward.

Secondly, you should know that unspecified values will be at default. Meanwhile, their “default” nature can override some existing specified properties.

This is what I mean. If you say:

border-radius:10px20px;

You might expect it to have a rounded corner all around, but that will not be the case. Instead, it will be an uneven, rounded corner because of the direction of implementation.

If you enjoyed reading this, consider sharing this on Twitter and tagging me -@jofawole.