CSS loading methods & best practices

Blue Street Tech
Blue Street Tech used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<<Should I concatenate all the style sheets that I can into 1 (if possible) to speed up the overall load of the site>>
yes it improves performance
http://developer.yahoo.com/performance/rules.html
http://www.seifi.org/css/how_to_boost_your_javascript_and_css_performance.html
http://websitetips.com/optimization/#tutorials
Can be done if
-- styles are not overlapping
-- ordering of the styles matter, so that needs to be get right

1. Yes concatenating will improve as there will be less server calls included. as stated above ordering of styles matters so concatenating should be done carefully.

2. including css which is global and let the inner pages have they own styles has good and bads like home page will have small css file which will load quickly,  caching of global css wont work on inner pages and the page will have to download another copy of its own css, managing different css for different page can be tricky etc.

if you do not have huge css file then it is good to keep them in a single file and enable compression on the web server.
Blue Street TechLast Knight
Distinguished Expert 2018

Author

Commented:
@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?
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

<<it would equal 1,470 lines. Is that large?>>
thats not large :)
Blue Street TechLast Knight
Distinguished Expert 2018

Author

Commented:
@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?
1. Don't concatenate as it'll be toughtest fr u to manage, so better to keep them separately.
Refer to this link
http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look 
and u'll get to know why I am saying this.
2. Yes, that is the best way to handle multiple stylesheets. Since you are using >net application, it's advisable to create a master page and call all your stylesheets there itself.

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?
No it's not 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?
Leave it standalone.

Styles in the style sheet take precedence on order correct? with he highest priority last in the sheet?
Yes , that's true..
<<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 ..
Blue Street TechLast Knight
Distinguished Expert 2018

Author

Commented:
@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. :\

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial