5 CSS Dont’s for Beginners

There are plenty of CSS tutorials out there that are aimed to increase your knowledge of CSS so you can cut down on mistakes.  This tutorial is going to point out some obvious mistakes that beginners to CSS coding make, with the intention of helping you stop doing these techniques.

1. DO NOT overuse Classes and ID’s

Beginners seem to add classes and ID’s to almost every element on the page.  This is not necessary and can defeat the whole purpose of using CSS. The overuse of classes/ ID’s can not only clutter up your style sheet, but are unnecessary. There are some examples below of what I am referring to.

Incorrect Example:

Here is how to correct the code above

Correct Example:

2. DO NOT use inline styles

Please do not use inline styles in your HTML markup.  The great advantage of CSS is being able to store style markup externally, and allowing it to be distributed to multiple pages.  Inline styles are a bad habit of the 90’s. There are certainly circumstances that inline styles can be useful but certainly not in a final product of a website.

Incorrect Example:

Here is how to correct the code above

Correct Example:

3. DO NOT abuse absolute positioning

Learn how to correctly use absolute positioning.   Every element on the page should not be absolutely positioned.  Learn how absolute positioning can be used effectively, because it is an important tool. Visit W3Schools to learn more about absolute postioning.

4. DO NOT have messy invalid CSS

There is nothing I hate more than a messy CSS file.  Keep it clean and validated to make it easier for other developers to debug.  You can use the W3C validator to validate your CSS.  Some programs such as TextMate for Mac and of course Dreamweaver for both Mac and PC have the validate feature built in. 

5. DO NOT contract DIVITIS

Divitis is a condition that beginners to CSS contract by putting everything on the page inside a DIV.  This partly comes from the transition from tables to divs.  Don’t get me wrong you should never use tables, unless it is for data purposes but you should not wrap every element on the page with a div.  For example do not replace a paragraph tag with a div tag.  View some examples below.

Incorrect Example:

Here is how to correct the code above

Correct Example:

Technorati Tags: CSS Tutorial, CSS dont’s, beginners CSS techniques, Semantic code

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles