Linking CSS Files – Need some insight
# November 28, 2012 at 4:09 am
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.# November 28, 2012 at 4:14 am
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
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 10:57 pm
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# November 29, 2012 at 6:43 am
This reply has been reported for inappropriate content.
@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.
You must be logged in to reply to this topic.