1 stylesheet with all rules VS 1 stylesheet with many @import rules

Witheet used Ask the Experts™
Hello all,

I have a farily basic question I guess... I have read somewhere that it is best to put all your styles in 1 large stylesheet... I always like to use 1 stylesheet and import small css files in to that 1 using: @import ... Which method is best practice loadwise an performance related... and is that a given or 1 of those discussion thingies where everybody says diiferently...

I hope someone can enlighten me on this...


Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018
Sometimes the performance gain of having 1 file is negligible (less server requests) compared to ease of management of having several files. As an example, you may have some parts of your site that only need specific styles. If you have a page with an image gallery, for example, you might have styles for lightbox effects. It makes sense to only load this file on the relevant pages.

It can also depend on the complexity of your site. 1 file with 10,000 lines of CSS might not be as easy to manage as 10 files with 1000 lines, but if you do separate your files, do so in a logical manner.

I tend to load a reset.css file, a core.css file for the main bits of the site. I may also have a print.css file for formatting the print output, and then occasionally have other, specific styles for 'bit-part' styling in the site, such as galleries, or one-off design elements.

I don't think there's a right and wrong way of doing it. It will come down to personal choice, performance and ease of maintenance. A nice balance is the way to go - don't have 1 file with 10000 lines, and don't have 100 files each with 10 lines.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial