The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Linking CSS Files – Need some insight

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #41041


    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.


    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 :)


    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.


    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.

    Kitty Giraudel

    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.


    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:

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

    Hope this helps :D


    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.