10 CSS Shorthand Properties: Optimize CSS Using Shorthand Properties

by

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

social%2Bmedia%2Bplugin%2Bfor%2Bwordpress%2Bwebsite%2B%25281%2529 min

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:


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.

Leave a Comment