Importing style sheets

[d@ngermouse]

Hi folks,

We previously used a centralized style sheet on our site that was this endlessly growing mess of random styles, and I recently have gone through and broken it up into subordinate style sheets that are imported to the main one. This has meant that our main style sheet is now nothing more than a list of @import calls, while the little style sheets are grouped by utility, workflow, etc.

It works a lot better, and I think I’m never going to do anything else in the future, but I can’t help but ask – is there any reason I SHOULDN’T do this? I can’t think of one, web searches haven’t turned up any, and the subordinate style sheets are all in a folder with the same root as the main style sheet so there’s no chance any of the links would ever be broken. But still…?

Is there any negative situation this could be opening me up to, or is it actually a best practice I have stumbled upon by accident?

Thanks,
Mick

[Beverleyh]

@import rules have a negative impact on page speed/performance because the individual stylesheets have to load sequentially down the chain, in the order they’re listed (more waiting, more http requests). They prevent parallel downloading, which is the browser’s way of pulling in resources faster, including standard linked stylesheets, so that the page loads quicker. You want CSS to load as fast possible so that the page looks presentable/usable to visitors (and perceived speed is just as important and actual speed), so its better for performance if we separate off the critical CSS and load it internally and/or minify and condense stylesheets into one master file. Cutting out the extra http requests via these 2 methods helps speed things up too.

You can find lots of resources if you Google something like “@import impact on performance”. Or read up on web performance in general. It’s a very interesting topic.

[d@ngermouse]

Glad I asked :) Thanks!

[Author]

Posts