Linking CSS Files - Need some insight - CSS-Tricks

This topic is empty.

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

Author

Posts
November 28, 2012 at 4:09 am #41041

jonedwards
Participant

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 #115723

Watson90
Member

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 #115724

jonedwards
Participant

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 #115725

Watson90
Member

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 #115712

Kitty Giraudel
Participant

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.

November 28, 2012 at 10:57 pm #115885

otc
Participant

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 29, 2012 at 1:16 am #115869

jonedwards
Participant

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.
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.