CSS Best Practices

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.

11 ideas on “CSS Best Practices

  1. Paul Davis

    Some nice tips. =]

    Made me switch from the generic reset, to a more refined, accurate reset. :)

  2. Steven Clark

    Just t a stab I’d suggest reset isn’t best practice, but it’s common practice now.

    Also, margin: 0 auto; may not always work, particularly in some older browsers we won’t mention – margin-left: auto; margin-right: auto; display: block; should get you out of that bind.

    Resetting font size to em I’d suggest putting size: 100% on the body element and then using em through your CSS – I believe it may solve an IE bug that using pure ems can cause.

    For clearing floated containers I’d avoid using clearer divs. Try putting on the container div something like overflow: auto, overflow: hidden or display table. Note that my experience with display table has been flakey in some versions of Firefox so it’s my last option.

    Also, I’d add that writing source code in it’s logical order, rather than presentational order is highly beneficial. And enforcing the separation of style from content using external CSS files would be best practices. Split logical parts of your CSS into separate files, but also understand that due to HTTP requests you don’t want them to be too small – look at the context and maintainability… I’m sure there are many more… well laid out stylesheets are a benefit when passing them over to others. I usually like an index at the top to state where each section of styling exists…

    It’s always good to see more basic articles about best practices come out because often it’s these fundamental ideas that are missing in the trenches.

  3. Daniel Koskinen

    You can also use the :first-letter pseudo-class for drop-caps. Then you don’t need to wrap the first letter in a span. I’ve done this over at http://mainossaatio.fi/saatio.html (in Finnish, sorry). Obviously you still need a hook for the paragraph if you don’t want it in all of them.

    If the paragraph you need is the first child of something else (a div, for instance) you could just use div:first-child:first-letter and be done with it. Useful if the content you’re styling comes from a CMS.

  4. Daniel Koskinen

    … I must correct myself. Piping :first-child:first-letter doesn’t seem to work at least in Firefox 3. So probably not a real option for the time being.

  5. Andy Gongea

    I really think that reset is one good practice.

    Regarding the margin:0 auto; is the best approach, of course you can add for IE6 a text-align:center to the body.

    Nice to hear about the display:table option. I didn’t know about that. Thanks.

    About the splitting of the CSS I’m totally against it. The reason is exactly the HTTP requests. We don’t have powerful servers so the speed has to come from us.

    Thanks for your opinion.

  6. Steve Robillard

    Your fix class appears to have both a red background and border. Not the green background you mentioned.

  7. Andy Gongea

    Thanks Steve. It is now fixed.

  8. Hawkthalas

    Great list bro. Good Job.

    The only thing that i must add about the 5th practice is that we use EM ’cause if you use pixels some browsers ( our lovely IEs :S ) cannot increase the font size or decrease it via their text size menu ’cause Microsoft thinks that the pixel is an absolute unit and must not be resized.

    Peace.

  9. Andy Gongea

    Thanks Hawkthalas.

    Edgy red background you have there on your site. Nice.

  10. Andy Gongea

    Yes, it is obvious that adding a border will increase your width or height, but only when you have fixed width and height. This practice is described in general not for a specific case. Anyway, good point Raymond.

    • Quintin

      I tend to use a 1px ‘outline’ instead of ‘border’, it prevents tight layouts breaking when troubleshooting.