Blue Street Tech
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:
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.
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 or2
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<<it would equal 1,470 lines. Is that large?>>
thats not large :)
thats not large :)
ASKER
@gurvinder372: Thank you!
- Lastly, should i keep the reset file separate?
- Styles in the style sheet take precedence on order correct? with he highest priority last in the sheet?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<<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
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 ..
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 ..
ASKER
@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. :\
ASKER
@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?