Some (Probably Common Sense) Web Development Tips
Here are some development tips and tricks I've found useful over the years.
1. Use a predefined xHTML skeleton. I hesitate to use the word "template" here even though most will call it that. I use a bare bones setup that has a index file, directory structure and common CSS stylesheets. My CSS consists of a reset stylesheet and a main stylesheet. My main stylesheet has a hierarchical organization and comes with a pre-defined container, basic two-column structure, and clearfixes (see below). This helps reduce the amount time needed to start a new project, while maintaining a uniform setup across multiple projects.
2. When applicable, use clearfixes. I'm strongly against extraneous markup, so I don't like using stray dividers, horizontal rules and breaks to extend dividers housing floats (or any other case for that matter), instead I use the clearfix method. This works on all browsers, albeit a little hackish for MSIEvil.
3. Transparent background images are possible in IE6. Yes, sadly way too many people are stuck in the middle ages using IE6. And as you know, IE6 does not support alpha-transparent PNGs (as well as IE6< but that should not be supported as it's older than me---okay, maybe not). Most people resort to using Javascript or CSS behaviors, but what happens when your user is stuck in a time before the middle ages, say the ice age, and has javascript turned off? Well, you get that whatever-shade-of-blue-this-is color everywhere. There is a well-known MSIE-proprietary CSS filter for transparent PNG images, but what about background images? Well, I recently found out you can do background images. Just put this in a separate MSIE only file:
#element{
background:transparent url(image.png) no-repeat;
}
#element{
background-image: none;
filter: progid:DXImageTransform.Microsoft. /
AlphaImageLoader(src="image.png", /
sizingMethod="crop");
}
Note the use of sizingMethod. You can find out more about that on Microsoft's confusing documentation site.
4. Modularize your CSS. You should always try as hard as possible to modularize your CSS. Until CSS supports inheritance, this will have to be done manually. For example, you have a notice divider that displays a success notice, an error notice, etc. That divider has a basic shape and structure: a predefined size, border, font styling. Instead of putting that styling in every notice type, use multiple classes. So .notice gets the structure while .error gets the different background color and border. Then you call it as <div class="notice error"></div> and so on.
This may seem like common sense, but working with markup from contractors and previous employees, you begin to see how many people don't use this technique.