Comments on: CSS Best Practices

By: Quintin

Quintin — Tue, 16 Feb 2010 17:55:03 +0000

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

By: Andy Gongea

Andy Gongea — Tue, 02 Dec 2008 12:12:47 +0000

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.

By: Andy Gongea

Andy Gongea — Mon, 24 Nov 2008 22:46:12 +0000

Thanks Hawkthalas.

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

By: Hawkthalas

Hawkthalas — Mon, 24 Nov 2008 22:14:49 +0000

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.

By: Andy Gongea

Andy Gongea — Sun, 16 Nov 2008 21:13:27 +0000

Thanks Steve. It is now fixed.

By: Steve Robillard

Steve Robillard — Sun, 16 Nov 2008 20:59:05 +0000

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

By: Daniel Koskinen

Daniel Koskinen — Sun, 16 Nov 2008 19:36:45 +0000

… 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.

By: Daniel Koskinen

Daniel Koskinen — Sun, 16 Nov 2008 19:34:54 +0000

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.

By: Andy Gongea

Andy Gongea — Sun, 16 Nov 2008 14:25:14 +0000

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.

By: Paul Davis

Paul Davis — Sun, 16 Nov 2008 12:24:43 +0000

Some nice tips. =]

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