My best tips to more CSS love

By Oscar Carlsson | August 10th, 2011 | Tech, Web dev

CSS code can be a living hell if it’s unstructured and badly written. In this post I’m going to give you my best tips to write better CSS code.

-   If you feed your CSS with shit it will soon be fat and ugly.

1. Planning

The key to beautiful CSS is planning before you write the first line of code. Yeah, you’ve probably heard it before with everything you do but the time spent on planning is worth ten times in the end.

I always start my code project by sketching the website on a piece of paper with main <Div>’s and headings (h1, h2). It gives me a nice overview of the CSS structure and makes me more comfortable to start writing my CSS.

css_tips_planning

2. Learn the CSS standards

There will be moments where you stumble upon a CSS problem and don’t know the best solution. It’s very easy, because of a tight deadline, that you’ll start doing “try and error” until it works in your browser. Of experience it just not the way to go. If you don’t following the standards you will end up with a CSS that works in one browser but not in another which will result in hours spend on problem solving.

There are so many solutions to one problem but there are not that many good ones.

http://www.w3schools.com/css: Here you can find all CSS tags and their use. Unfortunately it is not that good when it comes to more complex CSS because it doesn’t give you any solutions when multiple tags are in use.

When I’ve got a CSS problem I try to find the same CSS function on another website created by the CSS elite. When I find it I look at their CSS and learn how to do it the awesome way!

The CSS Elite according to me:
Dan Benjamin - http://hivelogic.com/
Dan Cederholm - http://simplebits.com/
Jeffrey Zeldman - http://www.zeldman.com/

3. Name your <div>s correctly

When I started writing CSS I didn’t name my <div>s carefully which resulted in names like “about-oscar” or “blue-link”. In the end the “blue-link” wasn’t blue anymore and the div “about-oscar” was used on places where it didn’t make any sense.
The solution is to name the DIVS according to its use or placement. Below you can see my standard names on a three column website:

<div id=”wrap”>
<div id=”header”>
<div id=”nav”>
<div id=”content”>
<div id=”column-left”>
<div id=” column-middle”>
<div id=” column-right”>
<div id=” footer”>

Visit the link below to see how great CSS developers have named their main <div>s on their website:
http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

4. Write CSS using TAB for a better overview

This is a trick that I haven’t seen before but it gives me an excellent overview of my CSS. I write my CSS like I write my HTML with tabs depending on the hierarchy.


css_tree_small
* Click on the image for a better view.

5. Download my WEB-STARTER-KIT

Instead of beginning from total scratch you should download my WEB-STARTER-KIT. It's just two simple files - index.html and style.css - but it will save you some time and get you started to build structured CSS.

Download WEB-STARTER-KIT HERE!

 

Discuss this post