10 Web Development Tips Part 3 (CSS Edition)

Tuesday, April 15th, 2008

This article is part 3 of our 10 web development tips series. If you’re interested in part 1, click here, or in part 2, click here. These 10 tips will deal more with CSS and developing your HTML base template from the design.

1 - Use ID instead of CLASS wherever possible
In the example: <div id=”myID”>myID</div> ID references the definition in the CSS file. IDs are used for items that are used once. For example, you can’t have two myID’s on the same page. It can allow you to better track what you’ve done. ID is also a lot shorter to type then class.

2 - Recycle old code whenever possible
Have you done a similar top navigation before? Make use of the code you developed for a project you finished 6 months ago. Time is money and you don’t want to go through the headaches you went through 6 months ago.

3 - Keep in mind what needs to printed
Although you can prepare print stylesheets, you can save yourself headaches later by remembering what needs to be printed and using an image or a CSS background accordingly. For example, clients typically like having their logos printed out, something that won’t happen unless it’s an image or you do a CSS workaround on your print stylesheet.

4 - It’s more important to keep your HTML simple
In the event that you can to choose between a more complicated HTML markup or a more complicated CSS file, go with the more complicated CSS file. Although you won’t think your template will get too bad, content added to your template may start to get a little cumbersome.

5 - Keep a library of stripped down useful functions
I often search my own blog and take a peak at my CSS Popup code whenever I need it because the code is in its simplest form. Sometimes pulling a developed version from another site you developed is a little trickier because you’ll have to undo the customizations you did.

6 - Use multiple stylesheets
In some occassions, you will need a decent clump of CSS code to make a single page on your website display correctly. Use a separate stylesheet for that page so that users who don’t access that specific page don’t have to download all that CSS.

7 - Know how to deal with PNGs
PNGs require a decent amount of work to get them to function correctly in every browser AND to validate. This becomes especially useful as more and more websites have drop shadows over complex backgrounds.

8 - Easy custom bullets
The easiest way to do custom bullets that function correctly in every browser is to use a background image for the <li> item. For this not to go bonkers with the lists in general, set the margin and padding to 0 for the <ul> and <li> item and work from there.

9 - Know how to replace quotes and apostrophes
These can start causing problems in fields such as text fields or text areas. Example: <input type=”text” value=”He said:”I don’t know what you’re talking about”" /> This would cause a giant mess and an unintended result. A quote can be replaced by " and an apostrophe can be replaced by ' (Don’t use ' or " as these don’t work all that well across all browsers)

10 - Radio buttons? Make sure you have one selected
Having a radio button pre-selected saves you from having to validate a blank result if the user chooses not to select an answer. For example, if you ask the user to select either Male or Female and neither one is selected by default, you’ll have to run form validation that makes sure that one or the other is selected. If you select Male by default, it’ll save that extra coding time. Besides, if you allowed users to not select an option, you’d use checkboxes instead of radio buttons.

That’s all for now, hope that helps.