Multiple or single CSS file?

by 15 replies
18
When I have certain pages in my site with lots of different features I often make a separate css file for that page. For example, I might have a product comparison table with a lot features like highlighting, tooltips, image slider and order buttons, which apply only to that page.

But when I get site templates they usually have a massive CSS file with sections for all the different features throughout the site.

I would think it's better to keep your style sheets lean and mean, even if it means having a half dozen or more to cover my site. After all, only one is being used at a time.

Or does it make no difference whether you have one long file or multiple shorter ones? I'm thinking particularly when it comes to page loading.
#website design #css #file #multiple #single
  • for best result serch on google
    • [1] reply
  • ronc0011 is right. Single will load faster and help improve your website's loading time by reducing the number of requests to the server.

    You could keep them separate if you architect your site so that css is only loaded as needed. This gets a little more complicated with a lot of the commercial CMS options.
  • agree with ronc0011 single will load faster
  • Most websites use multiple stylesheets. But it is done due to the need for having separate stylesheets for different needs. Don't have multiple stylesheets to keep them small.
    • [1] reply
    • I agree with the lean and mean, but just think of it as efficiency. No point at all loading something that isn't going to be used. I also rip out all the unneeded white space from the sheets when I've finished most of the work on the site. This cuts them down by up to 35% in file size out of the ones I've done. There are plenty of online tools to do that for free and Expression Web can do it on a desktop.

      I usually have 2 per site, my most used 2 col and often a 3 col or 2 column wide version when there is a lot of content. Sometimes I need something individual for a page and then I just put that style in the head.
      • [1] reply
  • Single CSS take less time to upload and easily viewed under slow connectivity.
  • Banned
    single css is better and use your important keywords in css too
  • for better speed optimizations is recommended a single css file. sometimes one single file is not enogh.
    • [1] reply
    • I personally like to use multiple css files while creating the website. Most of the times I am using 4 different css files while creating the site:

      • reset.css (see google for more info on css reset files)
      • layout.css (all my main divs, that take care for the fundamental site structure)
      • typo.css (all css code snippets related to the typographic +I also like to include my main lists, tables and input code snippets in here)
      • special.css (all special css code snippets which are required by jquery addons or similar. ie. i have the overlay css etc in here)

      I might have to add here, that I am always creating the main layout first (divs, margins etc) and I will not take care for colors or any design element until the site structure is done. I may add some borders in this phase to have a good overview of all divs.

      As I said, I do this while I am creating the site, because when using just a single css for the whole site, i almost always loose the overview and start making mistakes.

      Once I am 100% happy with the layout of the site, I am starting to put all css together and add the "look" (colors, sizes,shadows,gradients etc.) and remove the borders (the ones I added before).

      Once this steps are done, i will check the whole site again and try to combine css rules to keep the file small. Once everything done, I will compress it, upload it to a CDN and add the link in my website´s head.


      One more thing, I would recommend to you, if you plan to design more pages in the future:

      make yourself a very basic html and css "template". u might want to make 2 or 3 different templates for static and fluid layouts. Do not include any design element, but just the css reset rules and the main structure.

      You can than use this templates as a "starter" for all your sites.

      I cant stress enough on how important this is. I have done over 100 sites before I have finally made a personal template (includes all my css resets, css ie bugfixes etc, which I learned in the past years). And I couldn't imagine to work without it now.

      Edit: you may also want to look at the @import command in css. This way you can link only one css file in your html code, but still keep your css files seperate.

      Example:

      • [1] reply
  • Both options are utilized, I guess it all depends on the method the designer prefers to work with. In the beginning of my designing days I tended to use separate files, but moved on to s single file later on as I learned more and more about writing semantic code structure.
    • [1] reply
    • Both if you have a small website, but if you have a big one, a single because it's faster

      cheers
  • I have no idea about it.
Join the discussion

Next Topics on Trending Feed

  • 18

    Multiple or single CSS file?

    When I have certain pages in my site with lots of different features I often make a separate css file for that page. For example, I might have a product comparison table with a lot features like highlighting, tooltips, image slider and order buttons, which apply only to that page. But when I get site templates they usually have a massive CSS file with sections for all the different features throughout the site.