Graphic Rating

CSS Best Practices

• by Andy Gongea
• Nov 15, 2008
• 14 Comments »

I will first define CSS in order to start this article right. CSS is Everything. Seriously, for many web designers CSS is the beginning in a design world that will be followed by Javascript and understanding of server-side scripting. In order to become a decent web designer, one must know how to work with CSS. And a good way is to know the good practices in the CSS area. So let’s start showcasing the good approaches in CSS.

1. CSS Reset

The best reset code is Eric Meyer’s which was adopted by most of the web designers and it is also a part of the Blueprint CSS Framework. In order to give you a definition of CSS reset, I will quote the creator of this code.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on – Eric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body
{
line-height: 1;
}
ol, ul
{
list-style: none;
}

2. Link States

Defining your CSS styling for the link states is very important in order to have similar experience on all browsers. This is known as the LoVe HaTe rule:

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

3. CSS Shorthand

One good and important feature of CSS is the ability to write code in a minimized way. Instead of creating a CSS rule and adding lines of properties, you can use the shorthand version and simplify your code. I will give you the example of border, but there are different CSS properties that have the shorthand ability like margin, padding, font, background and list-style. You can check Dustin Diaz’ blog for the best CSS shorthand resource on the web

Normal
element {
border-width: unit;
border-style: (solid dashed dotted double);
border-color: color || #hex || (rgb / % || 0-255);
}
Shorthand
element {
border:border-width border-style border-color
}

4. Horizontally centered block elements

This is a common practice for most of the sites that have their layout centered in the browser. The way to do that is through the MARGIN property.

margin:0 auto;

5. Resetting font-size to Em

A common problem with CSS code was whether to use pixel or em units for font. The verdict was that em is better because a user can increase or decrease a font size with the browser. The next approach is very handy and it helps you see EM as PX.

body {font-size:62.5%;}

In this case the font-size is reset to 1em and 10px = 1em. So when you want a 18px font, you will only have to say font-size:1.8em. And in this way you are not forced to calculate ems.

6. Clear floated containers

This is very good when you have a block container with background or border that has floated elements inside. When this happens, the container is not extended to wrap around the floated elements and in this case the background and the border will not be displayed in the desired position. The solution is to clear the floats. You can do that by creating a new div after the floated elements with a clear:both property, like in the next example:

<div><!– float container –>
<div style=”float:left; width:40%;”><p>Content</p></div>
<p>Text not inside the float</p>
<div style=”clear:both;”></div>
</div>

If you want to better understand this concept I suggest reading the Clearing a float without markup. There you can find an alternative to this, without adding markup to your code.

7. Drop Cap

I’m sure you all know that big first letter in magazine or newspaper articles. The good news is that a drop cap (that’s how it is called) can be reproduced in a webpage with the help of CSS. It only takes some CSS properties and a span that will wrap the letter(s).

<span style=”float:left; padding-right:2px; font:bold 3em Georgia; line-height:1em;”> T</span>

8. Debuging CSS

This is a common problem for many designers which can be easily fixed using some special classes in order to see the glitches in your designs. In our case you can use the fix class which has a green background and a red border.

.fix { background:#0f0; border: 1px solid #f00; }

9. Avoid Hacks

I think that one can create a design without having to work with special browser hacks. My opinion is that instead of adding a CSS hack, you can adapt your design a little bit or try and fix it in a standard way. I don’t use hack and I don’t intend to.

These are some of the best practices regarding CSS. Maybe you have your own best practices. If so, we would like to hear them.