10 CSS shorthand tips and how to optimize CSS

cssIf 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 so important at the first sight. 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 in one line

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 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:

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;

Much simpler huh? 🙂

5. Margin and padding properties

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

6. Always remember that “0″ anything equals to “0″

Use the “0″ value instead 0px or 0em so instead the the following CSS properties

margin: 0px;
padding: 0em;

you could use:

margin: 0;
padding: 0;

7. Use shortcuts for hexadecimal colors

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

8. Simplify non integer CSS values

Instead writing 0.5em you can use .5em, 0.5px is equal to .5px

9. The last property semicolon it’s not required?

margin: 0;
padding: 0 /* note that you can skip the last rule semicolon, and yes it passes W3C validation */

10. 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.

These are some CSS shorthand tips I often use and they are very helpful for me, when coding CSS. I hope they will also help you writing shorter, better CSS code.

Over to you

What do you think about the tips I presented above and what else do you use for optimizing the CSS file?

Posted by: Dhiraj kumar

5 thoughts on “10 CSS shorthand tips and how to optimize CSS

  1. While #9 is true, I find that its far easier and less likely to cause a mistake if you do not practice this. This may be the programmer in me coming out, but I feel its the same for { } around conditionals and loop. Just because you can leave them off, doesn’t necessarily mean you should.

    The next time you add a statement and it doesn’t work will cost you more time than it would take to have originally included them.

    And whats one (two) character? You’d be better off trying to reduce your class names and ids, ala using camel case instead of hyphens etc.

  2. #10 – but including “display:inline;” on anything floated ensures that you won’t encounter the double-margin bug in IE6 — if you still care about IE6.

    Although, technically, you only need to include it when floating in the same direction as the margin, I always include it so I never have to think about when to include it and when not to.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s