CSS Tip - use a separate stylesheet for testing

If you are using cascading style sheets (CSS) on a new website design, it's probable that you will be testing new style sheet rules. For example, you may be creating a series of rules for a portfolio page perhaps in order to test different layouts. Or, you may be creating a new navigation menu that you want to test on specific pages.

In these cases, normally you would add the new styles to your existing style sheet, preview in a browser, edit, preview in a browser etc - until you get the effect you want. You may decide that a specific subset of rules are what you want but others are not required. This may lead to a plethora of styles, some of which are used in the final website, some of which are not.

I find it useful to create a separate style sheet

If your style sheet is well organised, this should not be a problem and it may be easy to delete the unused styles. Personally, I sometimes slip from these good habits (ahem) and I find it useful to create a separate style sheet for my 'testing' styles. I link the new testing style sheet to my web pages like normal (after my main style sheet), do my editing and testing. If OK, any 'successful' styles are moved to the main style sheet. This makes it easy for me to separate the style rules. Once you have finished the website design, simply unlink the testing style sheet with the unused rules.

Form layout testing

For example, I was testing different CSS layouts for forms recently. As a result I ended up with various form-related styles in my main style sheet. Some of these conflicted with each other and my main style sheet became a bit of a mess. It was much easier to create a separate style sheet for each subset of form layout rules and test each set. This also made it easy to apply and reapply each layout if I needed to. Additionally, it was simple to see which styles were causing 'problems' with my main layout.

If you find yourself with similar problems, using a separate style sheet may help.