10 Steps to Better CSS
Coding CSS can quickly get out of control. By following a few simple guidelines you can make your life a lot easier.
Organise your stylesheets
How you divide up your stylesheets is very much a matter of personal choice. You do however need to decide on how you organise your stylesheets. I use a slightly modified veresion of the template that comes with Andy Budd's excellent book CSS Mastery. This has author details at the top and clear delineation of sections throughout. If your site is large one stylesheet may become unmanageable so break it down into chunks and use @import to pull stylesheets into the master.
Use universal selectors
Knowing where you are starting from is very important. Often you will be perplexed as to why padding has been applied by a particluar browser. For that reason I like to remove padding, margins and borders from everything using a universal selector. I then reapply padding, margins and borders to specific elements and know exactly where I am starting from
}
/* Remove padding and margin */
*
{
margin: 0;
padding: 0;
border: 0;
}
Code defensively
The more you code CSS the more you will become aware of browser inconsistencies. Take the double float margin bug in Internet Explorer 6 and below for example. This is where a left float is placed within a container and a margin is applied to the move it away from the left edge. IE gets it wrong and applies a double margin. To combat this and the need to hack I like to apply margins to everything within the left float rather than the float itself. This results in consistent display across browsers.
Note: Both examples assume the div is floated left within a container.
Example one - applying the margin directly to the div. This will result in IE misinterpreting it and probable hacking.
}
#left-content
{
float: left;
margin-left: 10px; /* This margin will be doubled in IE6 and below */
}
Example two - float the div left and then move everything in it away from the edge by 10px using a universal selector. No hacking needed.
}
#left-content
{
float: left;
}
#left-content *
{
margin-left: 10px;
}
Avoid hacks
Hacking CSS is lazy and unless completely necessary should be avoided. With the release of IE7 may old skool hacks will cause problems. If you encounter a problem debug your CSS rather than hacking straight away. Understanding the nature of the problem is key to improving your skills. Most of the time you will be able to fix it without hacking. If you must hack put hacks in a separate stylesheet and comment clearly.
Use conditional stylesheets
If you have done more than 10 minutes of CSS you will realise that Internet Explorer is the most buggy of all browsers. Thankfully you can use conditional comments to manage the CSS that is served to IE. If I need it I have a stylesheet called ie6_and_below.css that targets older versions of IE. It allows me to manage CSS for older browsers quickly and easily.
<!--[if lte IE 6]>
<link rel="stylesheet" href="/css/ie6_and_below.css" type="text/css" media="screen" />
<![endif]-->
Test, test, test
If you want to create robust CSS based layouts there is no way to avoid testing. Begin by outlining the browsers you want to support. Then create a test environment. Most browsers allow you to install multiple versions. For IE there is a handy .exe available that will allow you to install multiple versions on one OS. You will also need to test on a Mac. In fact I would recommend you buy a Mac and use it as your primary machine.
Comment your CSS
Almost every book ever written on coding advises commenting. Comments explaining why and how you did something will make maintaining the CSS much easier.
/*-----------------------------------------------------------------------------
I use this for block comments
-----------------------------------------------------------------------------*/
/* I use this for short commments */
Read blogs
Stuffing your newsreader full of feeds is a great way to learn and develop. The web is an industry that actively shares knowledge so take advantage of this. If you find an interesting article or CSS fix through Google add the RSS feed to your newsreader.
Read the specs
If you really want to understand CSS there is no way of getting round reading the CSS specification documents. The good news is they are all free. You will learn a great deal from doing this so it is well worth it.
Drink lots of tea
OK I'm English and I like drinking tea but there will be times when you simply cannot fix a layout bug however hard you try. At this point it is a good idea to put the kettle on. Relax, go and do something else and come back to it with fresh eyes. You will often find that the solution will come very quickly after a break.
Comments
What's this?
This is a journal entry written by George Ornbo, a web designer who lives and works in London, England.
Subscribe
Participating / Attending
Link Love
Possibly related
Nov 16 2006
Organising and commenting your style sheet is well worth it. To my shame, I never used to do this until fairly recently. The better organisation makes it much much easier to see duplicate styles - and then delete or combine styles. I have gone back and applied organisation to older style sheets and saved many kbytes. Sadly, I find it quite a satisfying task (I must get out more).
Nov 24 2006
I’ve avoided using the universal selector because I remember reading somewhere that it screws things up with some browser, don’t remember which (I have a gut feeling it had something to do with Safari, but can’t say for sure).
Is this this the case or is my memory serving me a curve ball? Would be a whole lot easier if it wasn’t true…
Dec 2 2006
Isko - Universal selectors are not respected by IE5.5 and below. If you are still coding for IE5.5 and below you can use conditional comments to serve a stylesheet that targets deficiencies in these browsers.
As users stats for these browsers are now around 3% many people disregard this issue, although I appreciate clients often require sites to display consistently in older browsers.
Dec 10 2006
“In fact I would recommend you buy a Mac and use it as your primary machine.“
I would not recommend this unless you have easy access to a PC or a copy of XP and Boot Camp on your Mac. Otherwise you won’t be able to test on the most widely used browser, which makes you a bad web dev.
Dec 18 2006
Agreed Peter. Primary machine implies you should have a windows box too though.
Parallels is my choice. It allows me to run Windows and Linux on my Mac so I can cross-browser test
Dec 28 2006
I agree with most of the well written article especially about the needless point of creating hacks. Would you go to say that in most circumstances it is pointless?? I have only ever used one hack myself and that was to create the min-width/ height issue…
I however don’t agree with using a Mac as the primary source and drinking tea (mainly because I am not English)
Feb 11 2007
I can’t help but agree with you George, Using a Mac as a Primary Machine is a huge advantage. The amount i’ve learned from visually disecting websites using MacRabbit’s CSS Edit 2.0 is astounding.
The operating system itself is unobtrusive, and thanks to Paralles you can test the page with just about any known browser.
(Congrats on a good guide by the way, I’ve had it bookmarked for a while now - just so I don’t forget about it!)
Aug 18 2007
wow…excellent tutorial…many things that skips from mind now recall it…
thanks many thanks…!!!
Apr 9 2008
I have to say they are some of the best tips on CSS I have seen - a really solid introduction to web design.
May 23 2008
Great!you konw,I always feazed by the css !
May 29 2008
Excellent tips to write effective CSS which helps in quick pagedesign. Any designer would love this. Keep posting.
Aug 18 2008
Great stuff.. This will aid my CSS skills immensly. Thanks a lot.!
Sep 11 2008
Like your article very much. Enjoy it to read such a informative view. Thanks for sharing with us.Greatly done.Great - very clean and easy on the eye.
Oct 7 2008
you know…it’s posts like these that make sure that shapeshed stays top on my list of favorite websites…awesome stuff.
Oct 14 2008
CSS can get very messy if not done with good organization. Especially if you are doing something very advanced then followed by compatibility issues with IE firefox and soon chrome which I think is the same as safari…
Nov 11 2008
I am always looking to improve my CSS skills and I found this resource to be a great read. can anyone reccomend any more good resources for CSS?
Dec 5 2008
Really useful tips on CSS for both those new to it and those looking to improve and we can all improve all time.
I will bookmark this site and come back to read what else you post up.
Thanks Again
Dec 5 2008
Nice tips, I think I will go and buy the book on the basis of the post. Do you get cash if I click through the link on the page above?