Grow your CSS skills. Land your dream job.

one css file or more is better?

  • # May 31, 2013 at 5:37 am

    Just doing some house cleaning & looking forward for the pro’s & con’s.

    [master](http://www.mytravel22.com/login/masterstyling1.css “master”)

    [secondary](http://www.mytravel22.com/secondarystyling.css “”)

    [rbar](http://www.mytravel22.com/rbar2.css “”)

    3 css files in one [webpage.](http://www.mytravel22.com/kuala-lumpur-hotels.html “webpage”). Actually I’m trying to avoid redundancy of statement. Or even worse contradiction of statement among the css files.

    # May 31, 2013 at 6:17 am

    Why do you feel that you need to divide it into three different stylesheets? For performance, I would suggest merging the three together.

    Are there supposed to be several different sheets depending on which page? If so, there might be some merit in not adding them to every page, but that is, in my opinion, the only time there is merit in dividing it up when in production.

    # May 31, 2013 at 9:01 am

    [front.css](http://latitudu.googlecode.com/svn/trunk/css/front.css “front”)
    [main.css](http://latitudu.googlecode.com/svn/trunk/css/main.css “main.css”)

    I made some separated CSS files, because I load each file on different page types :)

    # May 31, 2013 at 9:37 am

    @Hompimpa The only thing you are adding then is an extra http request.

    I suspect that the difference in file sizes between adding a ‘global’ and ‘thispage’ css file as opposed a combined file would be minimal.

    Have you looked at that?

    My guess is that the load weight /time is probably about the same.

    # May 31, 2013 at 11:19 am

    @Paulie_D: For good reason I have to make them separated.

    Back to the question, if the case is to combine two/more CSS files to prevent redundancy of statement, mixing, confusing or something, you can still combine them into a single file and separate them with comments:

    /* Master */
    body {}
    h1,h2,h3,h4,h5,h6 {}
    ...

    /* Secondary */
    .page-wrap {}
    .grid {}
    ...

    /* RBar */
    ul,li {}
    ... etc
    # May 31, 2013 at 11:29 am

    @Hompimpa I didn’t say you didn’t have a good reason just that the difference in loading is probably the same.

    If you are loading a ‘global’ sheet + a ‘page sheet’ it adds an extra request.

    Combining the two sheets eliminates the extra request.

    However, if you have multiple pages (perhaps each with separate sheet) then the extra request MIGHT be justified because a single combined CSS sheet might be take longer to load than 2 sheets with an extra request.

    It’s something one should test.

    # May 31, 2013 at 11:31 am

    In the case of the OP, it looks like they are separate sheets for global page components that should, in an ideal world, be combined into a single css file and just loaded once.

    # May 31, 2013 at 12:17 pm

    I suppose if one of the stylesheets that you’re conditionally loading is like 100KB then you’d have reason to separate them.

    As for @moer2237, there’s no way those three files should be separated. If you want, you can have them separated locally but definitely combine (and minify) them during deployment.

    # May 31, 2013 at 4:28 pm

    There are only two times I don’t combine stylesheets:
    1. _Extensive_ CSS only used for one page
    2. Impacts the design of a page only seen by the admin (i.e. a WordPress theme options panel)

    # June 2, 2013 at 10:59 am

    > However, if you have multiple pages (perhaps each with separate sheet) then the extra request MIGHT be justified because a single combined CSS sheet might be take longer to load than 2 sheets with an extra request.

    I hardly think so. Once Gzipped, a clean stylesheet is blazingly fast to load.

    # June 2, 2013 at 11:01 am

    Hence the reason why I qualified my statement with a “might” and suggested

    >It’s something one should test.

    # June 3, 2013 at 5:36 am

    Thanks all for the comments, really appreciate it.

    Paulie_D – Suggestion taken. I’ll lump it up in one file then.

    TheDoc – True, it’s far from 100KB. Actually just approx 3KB combine! Should be no loading issues then.

    Hompimpa – Definitely some work on the comment separation but it does help on redundancy & contradiction issues.

    Cheers!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".