5 CSS Mistakes To Avoid

Written by Joe on Wednesday, January 27, 2010

1. Not using a reset stylesheet

A reset style sheet resets everything to zero.  Since most browsers have their own margins and padding on certain elements, resetting them to zero lets you start with a completely clean slate, not matter what browser you are using.  This will save you time in the long run and are available for free.

2. Browser testing

While a reset style sheet will help in most cases, you should still test to be sure.  Not all style properties work the same from browser to browser.  It is important to test in multiple browsers and on multiple opperating systems if available to ensure consistenct accross all platforms.

3. Don't use inline styles

Inline styles should be avioded for a few reasons.  The best reason being, if you want to update the look of your website, rather than having to edit one style sheet you have to go through the code and find the inline styles and update them.  If you have 100 html files that need to be edited, this will take much longer than editing one file.

4. Format your style sheets

The importance here is keeping everything neat and easy to update.  Reusability is a word thrown around in web development, and with css it's not different.  Clean style sheets are easy to reuse, edit, and update, and will save you time in the long run.  No matter how you format your style sheets, keep them clean and save yourself the trouble.

5. Not using shorthand

Shorthand styling is easier to read and can cut a style sheet in half.  When setting the margin on a page, rather than using this:

margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;

Use this:

margin:10px 5px;

The difference is self explanitory.  Save yourself the extra work and use shorthand styles.

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/css/2010-01-27/5-css-mistakes-to-avoid/

OR Join Our Mailing List