Grow your CSS skills. Land your dream job.

Linking CSS Files – Need some insight

  • # November 28, 2012 at 4:09 am

    Hi

    I’ve done a bit of reading regarding linking CSS files, either via _< link rel="stylesheet" >_ in the HTML < head > or using _@ import_, but I still need a little help wrapping my head around the performance issues…

    First off, I’m not using a pre-processor like SASS or LESS – I’m just using ‘regular’ CSS.

    I would, however, like to split my CSS into smaller, more manageable chucks in separate files (in much the same way as one would using a pre-processor). So my question is:

    Is it better to link the various CSS files in the HTML < head > using _< link rel="stylesheet" >_ in their stacking order, e.g.:

    < link rel="stylesheet" href="style.css" >
    < link rel="stylesheet" href="css/typography.css" >
    < link rel="stylesheet" href="css/main-menu.css" >
    < link rel="stylesheet" href="css/sub-menu.css" >
    < link rel="stylesheet" href="css/buttons.css" >
    etc, etc…

    Or, would it be best to use the _@ import_ function in my style.css file (main CSS file)? Bear in mind, I’m not really asking about @ import from within the HTML < head >. I also want them to stack / cascade correctly.

    What’s best from a performance point-of-view? What’s best from a maintainability point-of-view?

    Thanks in advance.

    # November 28, 2012 at 4:14 am

    Interesting topic!

    In my opinion, I think it’s best to try and keep the number of stylesheets to a minimum, if you lay out your styles.css in a clean and organised fashion, you should have any problem trying to find what you’re looking for.

    The more links you use, the more http requests to the server have to be made, thus resulting in bad performance issues whether or not using @import or < link rel ="stylesheet"... />

    I’ll be interested to see what others have to say about this :)

    # November 28, 2012 at 4:19 am

    Hey, @Watson90

    Thanks for the response.

    I’d agree with your sentiment, but when setting up styles for a CMS like WordPress, you can often end up with a stylesheet that runs into hundreds of lines… Splitting into smaller, maintainable chunks is often desired. But, in this instance, I’m not using a pre-processor, so I need a solution.

    Would also be keen to hear what others say, given my set of limitations / restrictions / variables.

    Thanks again.

    # November 28, 2012 at 4:30 am

    Chris uses a stylesheet for every page so he has a home.css, snippets.css, videos.css. But he links just the one on each page rather than throwing them all in the <head></head> section.

    # November 28, 2012 at 4:55 am

    Size matters. But more importantly, number of requests matter even more.

    The best way would be to concatenate and compress all your stylesheets into one, then push only this one to the production server.

    otc
    # November 28, 2012 at 10:57 pm

    Hello jonedwards,

    Interesting topic, first of all never use @import it is terrible performance wise. Next I agree with HugoGiraudel here Size does matter however the number of request is your priority therefore you should combine all your CSS into one stylesheet for production and make sure you minify it, this will save you 30%+ easy.

    The best minifier that I’ve work with is:
    http://refresh-sf.com/yui/

    You have a dropdown so you can choose js or css.

    Hope this helps :D

    # November 28, 2012 at 11:14 pm

    I agree with @HugoGiraudel. There is nothing wrong with working with separate files locally, but I would merge and compress them before pushing live. That’s going to give you the best performance.

    # November 29, 2012 at 1:16 am

    Hey, guys.

    Thanks for all the comments and suggestions – I’ll definitely take them into account and follow your lead.

    And thanks @otc for the minifier link.

    # November 29, 2012 at 6:43 am

    @import or link rel calls both count as HTTP requests. Your only cure is really to condense and compress them into one.

    That being said I do usually have 3 stylesheets in play;

    • - layout.css -> Grids/Main Div layouts
    • - styles.css -> Main all encompassing stylesheet
    • - IE.css -> Fixes for Microsoft incompetence.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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