When I create a web site, I like to organize my stylesheets and images into a specific folder structure. It keeps things tidy and separates presentation files (stylesheets and images) from content files (pages and images related to the content). It also leaves room for additional stylesheet “themes” for your site.
Here is an example of this folder structure:
/styles/
/styles/default/
/styles/default/images/
Default in this example would be the name of the “theme”. The sites I develop typically do not have multiple themes for the user to pick, so I don’t usually take the time to give them fancy names. However, if your site utilizes multiple stylesheets that the user could choose from (such as at the CSS Zen Garden), creative names would be helpful.
All stylesheets for the Default theme would be placed in the /styles/default/ folder. Likewise, images used by those stylesheets would go in the /styles/default/images/ folder.
This method keeps your styles consolidated and makes it easy to use them across multiple sites. All you need to do is copy the folder to the other site; you don’t need to pick through the images folder and figure out which ones are used by the stylesheet and which ones aren’t.
Technically, you wouldn’t even need to copy anything to another site. You could just specify the full URL in the link element or @import rule on the page, but I urge you not to do this. Your visitors may be using security software that sees cross-site references as malicious, thus blocking the stylesheet from downloading or, worse, blocking the entire page.
Tags: CSS, Web Design, Web Development