[SOLVED] 1 or more css pages?

[harkly]

I am not sure if I should I create 5 different css pages or use 1 and put the extra info in the html page? Not 100% on how the css is read by the browser, does it re-read the css each time to goes to another page? Is it faster to have just 1 css page?

 

Right now I have 5 pages. The only difference is in the margin of one of the div's - it moves an image up or down based on the page.

 

This is the only code that changes.

#cleft{
  width: 15px;
  height: 150px;
  float: left;
  margin: 302px 0px 0px 63px;
  background: url(cleft.JPG) no-repeat;
}


#cleft{
  width: 15px;
  height: 150px;
  float: left;
  margin: 276px 0px 0px 63px;
  background: url(cleft.JPG) no-repeat;
}

 

 

Also what is the general rule for the number of css pages? I have lots of stuff in just one, should I break them up?

[watsmyname]

Well use 1 css for all pages and include same css in all pages. You better change class name something like #cleft1 for use in other page. Its a good practice to have 1 css file and all styles defined in this page.

[harkly]

Thanks!

 

Does anyone know of any good articles on how the CSS is processed and how to format it so the pages load efficiently?

 

Lots of sites with info on how to write one but I would like something with more advanced info.

 

 

[gevans]

Its a good practice to have 1 css file and all styles defined in this page.

 

I wouldn't agree with that. The general page style, things that are constant from page to page are all good in a single css, but I make use of extra css files when styling site sttributes that only occur on one page, or that can be re-used...

 

An example would be a javascript gallery I've made. It's only loaded on one page and has a lot of style with it. It's pointless adding this to my default stylesheet which is included on everypage as it would just slow down the page load. So I use a seperate stylesheet which is included on the page that the gallery is on.

[gevans]

I also make use of two other style sheets for IE, one for all IE (before IE8) and the second aimed directly at IE6

[gevans]

Also, take a look at this article

 

http://www.communitymx.com/content/article.cfm?cid=90f55

[harkly]

Hey, thanks!

 

This was what I have been looking for!

[haku]

I prefer only using one CSS sheet - it caches meaning that other pages don't have to make additional HTTP requests to get new spreadsheets. This will increase the initial page's loading time a little bit, but will speed up all other pages on the site. Also, multiple HTTP requests are going to slow things down much more than filesizes. Here is what yahoo (who are excellent at this stuff) had to say about it - see number 1 in particular:

 

http://developer.yahoo.com/performance/rules.html