Jump to content

Why use multiple css sheets?


jPaulB

Recommended Posts

Hi Everybody,

 

I wonder if someone can help me sort out this question.

 

Some of the more impressive web sites will refer to several css sheets on single documents... like this:

 

<head><link rel="stylesheet" type="text/css" href="fonts.css"/><link rel="stylesheet" type="text/css" href="main.css"/><link rel="stylesheet" type="text/css" href="text.css"/></head>

 

Why? How is this strategy better than packing everything into a single css file?

 

Many thanks, there must be an advantage to that... but it evades me.

 

Paul

Link to comment
Share on other sites

only 'good' reason I can think of is modularity. if they are running a site where they want different styles on a per-page basis. so the index page may be using main.css, but the login page may instead use a login.css. but both pages may need the "fonts" and "text" css. thats the only good reason I can think of.

 

many times however big websites most likely use multiple css not for modularity but due to the evolution of the site. multiple developers may have come in at different times in the lifetime of the website and then applied their own styling. now the proper developer may just merge his styling in with the old css, but sometimes a previous developer might not have properly documented their own changes, making it harder for the newcomer to know where to begin or what to change, so the easy way is to simply overwrite. But this is just development in general, css doesn't have that hard of a pitfall since it is relatively easy to reverse engineer.

 

so really the common reason for multiple css usually isn't for modularity, but lack of necessity to clean up. after the first load of the page, the css gets saved in the browser's cache so the real loss in bandwidth is minimal, even though there still is a loss.

Link to comment
Share on other sites

1. Additional edits made by alternate or different developer other than the original

2. New scripts/plugins added such as slideshows, scrollers, popups, etc that has it's own css.

3. Added css for specific pages but had no clue how to set them to render only the specified css for each specific page using php or asp.

 

Having 2-3 css is really no big deal but I have seen sites that have14-20 css files and I really think that's an overkill and it requires the server to make 14-20 http request verses 2-3 which would make a small difference in download speed.

Link to comment
Share on other sites

I agree with newseed. I will usually use about 2-3 style sheets in my own sites. Usually they will be something like global.css, detailPage.css, and some other style sheet I've gotten from a plugin. I do it so my global style sheet is lighter and easier to read. The secondary style sheet is usually one that applies to a layout preserved for certain types of pages.

 

However, I work for a huge corporation as a designer and front-end developer and it is twice as easy for me to request an "exception" style sheet be uploaded for a project I'm working on than it is for me to request modifications to an existing style sheet. This results in an abundance of style sheets like you've probably seen.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...