6 Easy Tips To Make Your CSS Efficient

Here are a few tips I’ve gathered up to help you write a more efficient or clutter-free CSS.

No units for Zero values

.mybox {
    margin-top: 0px;
}

This I’ve seen oh so many times! Sure the CSS validator won’t give you an error because of it but when you think about it, why put units? 0 is still 0 in px, pt, em, %, etc…

Order matters… sometimes

a:link {  ... }

a:visited { ... }

a:hover { ... }

a:active { ... }

In some browsers, you might get some weird actions when the order of your link pseudo-classes are set in the right order. The order listed above is the correct one. If you were to group some of them together, you still need to keep the order. Here’s an example:

a:link, a:visited, a:active { ... }

a:hover { ... }

2 simple words to help you remember the order: LoVe HAte.

Use proper heading elements

h1 { ....}

h2 { ... }

Instead of the bloated code below:

.mytitle {
    font-size: 25px;
    color: #000;
    margin: 5px 0 10px 3px;
    padding: 2px 0px;
}

Proper headings should be used in this case. If you don’t like the font-size, just change it to the element instead of creating a class for it. It will also help you better your SEO.

Use shorthand properties

.mybox {
    margin-top: 5px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 4px;
}

Could easily be shorten to:

.mybox {  margin: 5px 0 10px 4px; }

Quote long font-family names

body {
    font-family: "Trebuchet MS", "Lucida Console", Verdana, Arial, sans-serif;
}

If you don’t … it won’t work.

Condense duplicate color codes

body {
    color: #369;
}

is the same as

body {
    color: #336699;
}

Tags: ,

Leave a Reply