Multiple or single CSS file?

by DavidO 15 replies
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
Avatar of Unregistered
  • Profile picture of the author signity2
    for best result serch on google
    {{ DiscussionBoard.errors[3586000].message }}
  • Profile picture of the author 723Media
    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.
    {{ DiscussionBoard.errors[3586291].message }}
  • Profile picture of the author octaminds
    agree with ronc0011 single will load faster
    {{ DiscussionBoard.errors[3586314].message }}
  • Profile picture of the author xtrapunch
    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.
    {{ DiscussionBoard.errors[3586343].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by DavidO View Post

      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.
      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.

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[3588303].message }}
      • Profile picture of the author DavidO
        Thanks for your opinions. There seems to be some debate here and both sides make sense in different ways.

        I think the only way to get some evidence on it is to test it. But I'm not quite sure how to go about it. I can test page loading with a single versus multiple short css files but will this give an accurate picture of my site performance?

        I mean, a single page will always load faster with a short css file. But once the longer file is loaded it might make loading subsequent pages faster. This will be hard to confirm, I think.
        {{ DiscussionBoard.errors[3591220].message }}
  • Profile picture of the author filthy
    Single CSS take less time to upload and easily viewed under slow connectivity.
    {{ DiscussionBoard.errors[3836675].message }}
  • Profile picture of the author escortbayan
    single css is better and use your important keywords in css too
    {{ DiscussionBoard.errors[3836682].message }}
  • Profile picture of the author hotcomputers
    for better speed optimizations is recommended a single css file. sometimes one single file is not enogh.
    {{ DiscussionBoard.errors[3837205].message }}
    • Profile picture of the author andrejvasso
      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.

      @import url('/css/reset.css');
      @import url('/css/layout.css');
      @import url('/css/typo.css');
      {{ DiscussionBoard.errors[3864355].message }}
      • Profile picture of the author akonmask
        The CSS file instead of having the myriad of CSS files, That has the full version of Vigilance of the CSS file. The master of the CSS are available like, typo.css, special.css, reset.css, layout.css. to Open this file in your browser, copy out all the.
        {{ DiscussionBoard.errors[3880402].message }}
  • Profile picture of the author IM Alex
    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.

    If you're in doubt, you're not in doubt.

    {{ DiscussionBoard.errors[3882421].message }}
    • Profile picture of the author Vincent1988
      Both if you have a small website, but if you have a big one, a single because it's faster


      Looking for a serious JV partnership. Pm me

      {{ DiscussionBoard.errors[3884654].message }}
  • Profile picture of the author alengrew
    I have no idea about it.
    {{ DiscussionBoard.errors[3892799].message }}
Avatar of Unregistered

Trending Topics