10 tips to build robust CSS-driven websites
- The !important keyword
If a style you're implementing is not being expressed, you must ensure that your selector is actually targeting the element of interest. By adding the !important keyword to the end of your rule, you override any competing selector's style rules. If your style isn't expressed, your selector is probably malformed and not selecting your element. Just remember not to leave any !important keywords in production, they're maintenance poison. - Comments are your friends
If your design falls apart, try to comment out blocks of your markup. If you can determine which element is giving you trouble, you can then start commenting out the style rules which target that element. This kind of sleuthing is invaluable when coming up against display bugs in previous versions of Internet Explorer.
- border:1px solid red !important;
Positioning can be one of the more difficult aspects of CSS-driven designs. By adding the above rule to an element, you can determine how it is placed on a page, its margins, padding, and the margins of surrounding elements. It is sometimes helpful to add the following wildcard declaration to your CSS to see how everything is positioned in relation to each other:
* { border:1px solid red !important;}
- Take advantage of help
Newsgroups are a great forum to ask CSS questions, as is the css-discuss.org mailing list. I've been know to occasionally lurk around the latter. - Pick up a book... or five
There's no way around this one. Without a solid grounding in XHTML and CSS, you’re going to have difficulties realizing more advanced designs. Fortunately, there are some great books out there that can help you develop these skills. The books I always have within an arm’s reach are:
- Validate! Validate! Validate!
Use the proper tools to ensure that your markup and CSS validate, or you’ll pages will behave in non-standard ways. If things aren’t working out, visit the following and check your pages and CSS:
- Tidy your markup
Ok, so your markup is a mess. You can use the aforementioned markup validation service to help identify and resolve the issues manually, or you can use HTML Tidy, a great little application developed by Dave Raggett and maintained by the W3C, to do the heavy lifting. You can find out more about HTML Tidy
here. - Bug squashing
So, your site looks great in Firefox, Opera, Safari, and Konqueror, but it falls apart in Internet Explorer. A guide to squashing all of IE’s bugs is beyond a quick tip, but be sure to check out the following sites for help:
- Take a breather
Pounding away at a problem can be frustrating and narrows your focus. Step away, relax, and come at it fresh. I often come up with new approaches while I’m nowhere near a computer. - Keep it simple
Try to keep your markup as lean as possible, and apply as few styles as possible to effect your designs. The confluence of bloated markup and conflicting styles can lead to side effects that are difficult to identify and resolve.
Sound off