It’s tidy
A much cleaner set of stylesheets can be obtained by splitting them into different files. This is known as encapsulation – where each stylesheet only contains the relevant, associated information.
For different media types
Different stylesheets can be used to support different devices. Three of the most popular are:
- Screen – for display on a monitor
- Print – for printing a webpage
- Handheld – for mobile and handheld devices such as the Kindle
Stylesheets catering specifically to handheld users is becoming more popular now, with the boom in the range of smartphones and tablets available since 2011. By using a stylesheet for handheld devices you can omit things such as background images and scale down/compress decorative and informative images further, both to fit on the screen and to reduce the bandwidth needed for a handheld user to view your site.
For IE6, IE7 and IE8
You could split conditional statements for Internet Explorer into its own stylesheet. This way you can keep your main CSS files clean, and also only include the IE specific sheets when a user is actually looking at the site with IE, rather than having the statements in the main CSS files loaded to every user, reducing load times for the users not using IE6, 7 or 8 to view your website. You should consult your user metrics for data on browser usage before deciding what browsers to support.
One for layout, one for color
If you were to use one stylesheet for layout and one for colour, it reduces the chances that something in the layout gets broken. If you create a system and roll it out to 20 different entities (known as white-label products), be they buyers, clients, or site visitors then it needs to be as foolproof as possible. Clearly outlining which sheet does what, and indicating which styles can be safely changed (within both sheets) goes a long way and can only show good things about you as a developer/company in regards to your work and attention to detail and usability.
Conversely, if you have an existing system and a new editor or employee is brought in to take over the administration of the website (or even just the CSS) then having a layout and “theme” file can reduce the time it takes for them to figure out which styles control different parts (in regards to colours, fonts, borders, etc) – and this is where also having a user guide and a healthy amount of comments in the code are worthwhile. Anyone who’s been put into this situation will agree, I’m sure.
The more you can do to lower the learning curve and time spent learning the code, the better off you’ll be in the long run.
Size and download times
You don’t need to worry too much about the size of a CSS file, as they only need to be downloaded once for an entire site, though doing what you can to reduce the file size always helps when people are on lower internet speeds as 31 countries have average connection speeds of 1 Mbps or less from data recorded in Q3 2011 (Source: Akamai.com’s State of the Internet report). If the stylesheet takes to long to download, it could time out and leave your users looking at an unstyled page, hardly an incentive to stay on your site.
If you are worried about the size of your CSS files, and have access to using PHP on your website, you can compress the contents of the different files before the page is loaded using one of two methods:
If you don’t have access to PHP for your website, for whatever reason, you can use online tools to compress the CSS. Such as the YUI online compressor which is also available as a downloadable program, or Google’s minify project
Lastly, if you don’t have access to PHP and want to avoid using a compressor, simply coding your CSS in lines can make a difference as file sizes grow. Below is a comparison table of a CSS file for a site I’m currently working on.
| Block | Line | Compressed | |
|---|---|---|---|
| CSS | 8.1kb | 7.8kb | 6.1kb |
The CSS file used has styles that span 3 A4 pages (while coded in lines). As you can see from the results, a large gain can be made by compressing the CSS (as expected) but a minor gain is also gained from coding in lines (the CSS file had empty line breaks to improve readability while the site is being developed.
While the size of a CSS file may not be the thing at the top of your mind when trying to meet a delivery deadline, it should definitely be one of the finishing touches.
Conclusion
Using seperate stylesheets may seem a like a waste for small scale websites, but if you’re designing a large site, predict your site growing in the future, or just want to have neat and efficient CSS, then taking an object-oriented approach to site architecture and laying efficient groundwork at the start will save you a lot of headache in the long run.
