10 CSS Shorthand Properties: How to Optimize CSS Using Shorthand Properties

Today Pubg

December 29, 2021

---

Do You Wanna Write Efficient and Optimized CSS Code?

So here in this blog, we gonna show you the 10 best CSS shorthand tips. These shorthand property tips and tricks apparently don't seem to be that more important, but when you write thousand of CSS code lines you will wish to optimize every single line of your code.

Why Optimization of CSS is Required?

Optimization of CSS is required because loading speed does matter in Google ranking algorithms and if your stylesheet size is small then your webpage will load faster than usual.

Below we will discuss 10 comprehensive CSS shorthand properties guide to help you to optimize your CSS code. So let's start and see exactly how we can optimize a CSS code.

10 CSS Shorthand Properties: How to Optimize CSS Code

1. Background Properties

The background property is a shorthand property for:

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

It does not matter that one of the values above is missing, for example, background: #000fff url(smile.jpg); is valid. Defining background property is very easy.

Why we using:

background: url(example.gif);

background-color: #0f0f0f;

background-repeat: repeat-y;

background-position: top left;

When you could easily write:

background: #eaeaea url(example.gif) repeat-x top left;

2. Border Property

When all of the border widths are the same, instead of using this code:

border-color: red;

border-width: 1px;

border-style: solid;

When you easily write:

border: 1px solid red;

3. List Properties

The following list properties:

list-style-position: outside;

list-style-image: none;

list-style-type: disc;

You can easily simplify into one shorthand declaration:

list-style: disc outside;

/* shorthand notation for list properties */

/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

4. Font and Line-height Properties

Font and line-height properties like the ones below:

font-family: Arial, Helvetica;

font-weight: bold;

font-style: italic;

font-size: 1em;

line-height: 1.5em;

That code easily done into:

font: bold italic 1em/1.5em Arial, Helvetica;

5. Margin and Padding Properties

This example effective for margin and padding, so in the next we will use example of css property.

/* top=10px, right=5px, bottom=15px, left=20px */

margin: 10px 5px 15px 20px;

/* top=10px, right=5px, bottom=10px, left=5px*/

margin: 10px 5px;

/* top=10px, right=5px, bottom=15px, left=5px*/

margin: 10px 5px 15px;

Also Read:

> CSS Mix Blend Mode, Mix Blend Mode Black and White

> Portfolio Glass Website Using Only HTML and CSS

How to Optimize CSS Code

0px Equals 0

Use the 0 value instead of 0em or 0px because CSS value unit 0 equals 0.

margin: 0px;

padding: 0em;

Can be easily written as without unit value:

margin: 0;

padding: 0;

Shortcuts for Hexadecimal CSS Colors

White color equal to #ffffff or just #fff, #aabbcc can be wrote like #abc and so on.

Simplify non integer CSS values

Instead of writing 0.5em you can also use .5em.

Floated Elements Inherits display:block Declaration

When floating an element there is no need to add also “display: block” declaration. This is helpful for avoiding redundancy and save us one line of CSS.

Conclusion

These are some CSS shorthand properties tips i often use as these are very helpful to write shorter and better CSS code.

CSS