5 CSS shorthand tips and how to optimize CSS

If you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips. These tips and tricks apparently don’t seem to be that important, but once you write thousands of CSS lines you will wish to optimize every single line.

Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller. Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.

1.Background properties

Defining a background property could be made in an easier way than we often happen to see.

Why using:

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

… when you could easier 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:

  border-color: red;
  border-width: 1px;
  border-style: solid;

… you can simply write this:

  border: 1px solid red;

3.List properties

The following list properties:

  list-style-position: outside;
  list-style-image: none;
  list-style-type: disc;

… could be simplified into one 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;

… can be easily transformed into:

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

5.Margin and padding properties

This example applies for margin and also for padding, so next, we’ll use as an example the CSS margin 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;

Now let’s see what else we can do to write optimized CSS:

0 equals 0

Use the 0 value instead 0px or 0em because no matter the CSS value unit 0 equals 0. So, the following CSS properties’s 0 values

  margin: 0px;
  padding: 0em;

can be easily written as unitless values:

  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 use .5em.

The last declaration’s semicolon is not mandatory

You can skip the last declaration’s semicolon, and it still passes the W3C CSS validation.

  div {
   margin: 0;
    padding: 0 /* no semicolon here * /
  }

Floated elements inherits display:block declaration

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

Conclusion

These are some CSS shorthand tips I often use as they are very helpful to write shorter and better CSS code.