0

In a recent web based project I had to write a good number of css files (combining upto ~40 KB). Currently I'm using the @import() in the css file of the first page. Like:

@import url("reset.css");
@import url("input.css");
@import url("img.css");
@import url("menu.css");
@import url("home.css");
@import url("about.css");
@import url("detail.css");
@import url("contact.css");
@import url("solutions.css");
@import url("notices.css");
@import url("general.css");

Now there would be a good number of users using this from very slow internet connections (4~5 KBPS). So would it be better to use <link rel="stylesheet" type="text/css" href="cssFile.css"> ? But according to my php coding, I need to @import the first four files at least! Hoping for a better solution.

Another question related to this, does the browsers cache the css files all the time? If so, then all my css files get loaded on the first time and the user gets no hassle after the first time he logs into the site. Am I thinking the right way in that case?

Sanjay Saha
  • 15
  • 4
  • It has been [asked](http://stackoverflow.com/questions/7199364/import-vs-link) [several](http://stackoverflow.com/questions/4801302/css-import-or-link-rel-with-media-attribute) [times](http://stackoverflow.com/questions/8544987/including-css-with-link-or-import-which-is-better). for more reading: http://webdesign.about.com/od/beginningcss/f/css_import_link.htm – Hashem Qolami Aug 24 '13 at 15:05
  • I tried to find the answers before posting the question. And I found in on the top of the question from suggestions after posting the question!!! Sorry for redundant post! – Sanjay Saha Aug 24 '13 at 15:39

1 Answers1

1

To optimise the speed, you should try to:

  • have as few CSS files as possible
  • load only the CSS needed for each page
  • reuse CSS files in different pages

These goals will partly conflict. Normally you will have some CSS that is not used in a specific page, but that is all right because that allows you to have fewer files and reuse the files.

"does the browsers cache the css files all the time?"

Yes, they normally do. Making browsers download new versions of CSS files is an actual problem.

Guffa
  • 640,220
  • 96
  • 678
  • 956