We all have a slightly different approach on how to write CSS. That’s part of the reason it can be a nightmare to edit someone else’s.  But there are a fair few good practices you can use in your CSS to make your style-sheets easier for you or anyone else to read or modify in the future.

1. Start With a Reset

Every browser out in the world has applied its own slightly different styles to elements by default. This idea of a reset style sheet is to take away all of the styles that a browser might add. It helps a great deal when it comes to browser inconsistencies

Many developers start using this short reset.

*{margin: 0; padding: 0}

however if you wanting a more advanced CSS reset, the Eric Meyer’s reset is a popular, along with Yahoo’s developer reset.

2. Making Comments In Your CSS

In your other languages you include comments don’t you, why don’t you include them in your CSS also. Comments are a way of adding some explanations to your code for you or another person to modified in the future. But thankfully, most CSS is self-explanatory and you won’t need to worry about commenting extensively.
/* Header */
#header {height: 80px; width: 450px;}

3. Stay Organised With A Structure

It always makes sense to lay your style-sheet out in a way that allows you to quickly find parts of your code. Rather than randomly dropping id’s and classes in the order in which they come to mind, use a consistent structure. An example style-sheet might be ordered like this:

• Resets & Overrides
• Miscellaneous
• Links & Types
• Main layout
• Secondary layout structure
• Form elements

4. One line or Multiple Lines

You find that you have two group that despise either method but both practices are perfectly acceptable, just remember that this is your choice to choose either method  That’s all that matters

One Line
#whatever{ width: 200px; height: 80px; background: red;}

Multiple Lines:
#whatever{
width: 200px;
height: 80px;
background: red;
}

5. Shorthand CSS

Shorthand CSS is simply shrinking your code considerably when crafting your CSS. Elements like background, margin, padding and others
#map{
margin-top: 5px
margin-right: 9px;
margin-left: 4px;
}
You could combine those styles above in one.
#map{
margin: 5px 9px 0 4px;
}

6. Compress Your CSS

When you’ve finished coding out your CSS. It’s time to think about the machines if your file is smaller, it’s going to download quicker but how can you make the file smaller?, cut the white-space and comments out.

You can use a simple tool that can take care all of that. you can use this CSS Compressor tool to compress your CSS but warning to those WordPress designers if you using this tool you will need to enter your theme info comments back in. But if you need to edit your compress file do you need to save an uncompressed CSS files also, well yes or you can use this tool to beatufiy your CSS

7. Validate Your CSS

Make sure to use the W3C’s CSS validator, If you’re stuck and layout isn’t doing what you want it to do, the validator will be a big help point out errors.

8. Ems or Pixels

It’s always been a debate on which ones to use pixels (px) or ems(em) when defining sizes, Pixels are is a more static ways to defined font sizes but ems are more scalable with different browsers sizes and mobiles devices.

Ems is always to use them because certain browsers couldn’t re-size pixels fonts but that is a major downfall for building an accessible layout for users who need larger font sizes.

Pixels are much more simpler to work with in your CSS and given that they work every bit as well as ems now.

9. Combine Elements

Elements in a style-sheet sometimes share properties and instead of re-writing code why not just combine them, for example your h1 and h2 elements might share some of the same properties like font family.

10. Keep a CSS Template Library

It’s insane to re-write each and every one of your style-sheets from scratch, especially if you’re using the same conventions & methodologies in each. It’s simple when you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.  You can save multiple versions for multiple uses such as: two-column layout, blog layout, print, mobile and so on.

What other CSS best practices would you recommend using? Be sure to leave a comment with your response.