Graphics Unplugged

Decrease Development Time Through Separate CSS

Posted by Kyle Diedrick

Pretty much all designers are in agreement that having your styling outside of the page is a great idea.  It cuts down on clutter and decreases page load time, not to mention it makes styling many pages to look the same much easier.  However,  I have recently began to separate out my style sheets into individual files based on the overall function of certain styles.  For example, having your reset information in its own style sheet, or having the styles that govern object positions or page layout in their own file.  I think this is something that is often overlooked, so here are my thoughts on the subject.

It’s all about efficiency

Splitting up your style sheets into individual files can save you large amounts of time when designing sites.  The three major areas that this plays a role in are reset style sheets, layout styles, and typography.  Most designers have a preset reset sheet that they include on all of their designs.  Since this really doesn’t change it can be saved to its own style sheet and simply imported into each site without any modification.  The same can be said about layout.  While each site should be styled uniquely, there are some components of site layout that tend to remain constant.

For example, most sites use a content area of about 2/3 of the width of the page and leave the other 1/3 for a sidebar to contain other information.  I suggest that this kind of layout information can be saved to a standard layout style sheet and simply be imported into sites that you want to use those styles on.  You can also have a standardized set of style sheets for typography, since most content portions of sites tend to use similar fonts and font sizes.  Since these parts of a website style tend to be very similar you can create a style sheet for each one and then individualize it for each site.  By using standardized style sheets like this you should be able to dramatically decrease the amount of time and effort it takes to produce a website.

Implementation

There are really two ways to load several style sheets into sites.  The first and one I recommend is to do it within your main Style sheet, and is the easiest.  Simply use the @import tag and point it to your style sheet.

Example:

@import “style/layout.css”;
@import “style/typography.css”;

The other option is to load each sheet individually in the HTML header.  This accomplishes the same goal but the code is much bulkier and clunky.  I’m not going to provide an example for that since it is the same as including a style sheet on a page.  Also I really don’t recommend this option because there is no real downside to using the CSS @import tag.

Hopefully this will reduce the amount of time that development of sites takes, I know that in my personal experience having a basic framework to build off of makes website development much easier.  It’s a lot easier to modify an existing design than it is to develop something from scratch.

If you have any questions please post in the comments!

Fancybox Instant Now Available!

Want to learn more about the Fancybox plugin for jQuery? Check out my latest book! In it you will learn about all of Fancybox's features through straight forward examples. Buy the book here!

1 CommentPosted March 14th, 2010Kyle Diedrick

One response to “Decrease Development Time Through Separate CSS”

  1. Decrease Development Time Through Separate CSS…

    How to decrease the amount of work involved in website development by using separate Cascading Style Sheets….

Leave a Reply

Your email address will not be published. Required fields are marked *

Archives
Recent Posts