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" >
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.
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 :)
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.
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
@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;
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".