Tutorials

CSS Beginners Do’s and Dont’s Part 2

Tags: Beginner

This is the second part to my previous article “CSS Beginners Do’s and Dont’s Part 1“, if you haven’t checked it out yet now is a good time. In part one, I went over general tips and reminders, in this article I would like to go over more of the technical aspects of CSS.

1. DO use Class/IDs Appropriately (Don’t whore your Class/IDs!)

Beginners typically have the tendency to create a new class or ID for every element on a page. When you end up packing your stylesheet/markup with redundant and unnecessary class/IDs, you start to defeat the purpose of CSS. The beauty of CSS is that it allows you to separate design from markup, so lets keep the class/ID overload to a minimum!

BAD Example

<div id="sidenav" class="left">
    <p class="side-heading"><strong class="green">Side Navigation Title</strong></p>
    <p class="sidenav-menu1"><a href="#" class="blue-link">Home</a></p>
    <p class="sidenav-menu2"><a href="#" class="blue-link">About</a></p>
    <p class="sidenav-menu3"><a href="#" class="blue-link">Services</a></p>
    <p class="sidenav-menu4"><a href="#" class="blue-link">Portfolio</a></p>
    <p class="sidenav-menu5"><a href="#" class="blue-link">Contact</a></p>
</div>

Good Example

<div id="sidenav">
    <h2>Side Navigation Title</h2>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

2. DO Keep Your Styles Clean and in Your Stylesheet

I’m sure most of us do this from time to time (I’m guilty of this too!), but don’t leave inline styles on your markup. It’s a sloppy habit and it creates potential inconsistency in the long run. As beginners its very important to get in good habits by taking all styles off of your markup and neatly organize them into your stylesheet.

Bad Example

<h1 style="font-size: 20em; font-weight: normal; font-family: arial; color: red; padding: 10px; margin: 10px;">H1 - Heading</h1>

Good Example
HTML

<h1>H1 - Heading</h1>

CSS

/*------Global Heading Properties------*/
h1 {
    font: 20em normal arial;
    color: red;
    padding: 10px;
    margin: 10px;
}

3. DO Learn Tricks and Limit Hacks

There are a lot of tricks out there that can fix cross-browser issues without using any hacks. Do learn to use these instead of hacking up your stylesheet. Below are some great resources to learn tricks you should get very familiar with.
Helpful CSS Resources

• All About Floats
• The CSS Overflow Property
• IE CSS Bugs That’ll Get You Every Time
• Using CSS to Fix Anything: 20+ Common Bugs and Fixes
• 15 CSS Tricks That Must be Learned

4. DO Optimize Your CSS

There are various ways you can optimize your CSS. Check out my previous article
“5 Step CSS Weight Loss Program” to get some ideas and tips on what you can do to avoid stylesheet bloating.

5. DO Learn How to Use Absolute Positioning Properly

I sometimes run into sites where every element on the page is using an absolute positioning. Absolute positioning is powerful and useful but should not be abused in this way. Do learn the correct methods of creating layouts using a combination of floats and block elements, don’t abuse absolute positioning!

Helpful Articles Elsewhere

• 70 Expert Ideas For Better CSS Coding
• 10 HTML Tag Crimes You Really Shouldn’t Commit
• Smashing Magazine Articles – CSS