Link to home
Start Free TrialLog in
Avatar of Blue Street Tech
Blue Street TechFlag for United States of America

asked on

CSS loading methods & best practices

I am working in an .ASPX environment on a hosted ecommerce solution that provides me limited access. I can edit all the pages but most of the core framework is untouchable. I have verified that once directory “CSS” automatically includes all CSS files into the head section of the site structure.

I am using multiple CSS files more or less for allocation/sorting purposes. I have 7 style sheets currently. Some must stay separate, such as Reset.css, etc. I may also plan (in the future) to include separate style sheets for specific browsers IE6, IE7, etc.
My questions are:

1

Should I concatenate all the style sheets that I can into 1 (if possible) to speed up the overall load of the site or

2

Should I only include style sheets that are used in every page in the Head section and all the rest reference in a page-specific way? I did not want to use internal as this will take longer to read as well.

The only issue here is that I was under the assumption that external style sheets should always be referenced in the Head section, however, if I chose option #2 it will reference them in the body of the source code, which I don’t think would pass validation.

These are only my assumptions that I am relying on (you) the experts to validate. Thank you.
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Blue Street Tech

ASKER

@gurvinder372: excellent articles! Thank you.
@ddsh79: Thank you.
I am dreading this merger, but i am pretty positive i don't have overlapping files. I have been continuously searching all files in the site for calls to make sure they are unique or at least inheriting properly. Still it seems daunting.
I'm not sure what is considered to be a large CSS file but *if* i concatenate all the CSS files, excluding the Reset.css file, it would equal 1,470 lines. Is that large?
Correct me if i am wrong but wouldn't it be prudent to exclude the Reset.css file in this merger and leave it as a standalone?
Styles in the style sheet take precedence on order correct? with he highest priority last in the sheet?
<<it would equal 1,470 lines. Is that large?>>
thats not large :)
@gurvinder372: Thank you!
  1. Lastly, should i keep the reset file separate?
  2. Styles in the style sheet take precedence on order correct? with he highest priority last in the sheet?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<<Lastly, should i keep the reset file separate? >>
You need not. Just make sure that it is placed at the beginning of combined file

<<Styles in the style sheet take precedence on order correct? with he highest priority last in the sheet?>>
check this cascading order
http://www.w3.org/TR/CSS2/cascade.html#cascading-order
Reset file can be kept separate or merge it with common css as it is simply 50-55 lines of code.
Also the size of the css depends on the size of the project : Large or small. If it's a big project.. it's advisable to keep it separate else merge ..
@All: thank you for your feedback. My apologies about not awarding points sooner...been swamped in this project totally blanked on getting back here. Sorry again. :\