CODEWITHSUNDEEP
css
JasonDavis
JasonDavis

Reputation: 48963

Does using @import in a CSS file cut down on HTTP request?

If I have a CSS file that is included into the page like 

<link rel="stylesheet" type="text/css" href="all.css">

And then that file has...

@import "shCore.scss";
@import "shThemeDjango.scss";

Does this do 1 HTTP request or 3?

Is there a benefit of importing multiple files vs linking to all of them in the main file?

(I know the ideal solution is to combine all and minify)

Upvotes: 2

Views: 242

Answers (3)

Luka
Luka

Reputation: 603

I think, given the context of the question, there has been some misleading advice. Sure, "vanilla" CSS @import will make a HTTP request. But the OP seems to be using a pre-processor.

Pre-processors, such as; SASS or LESS, work by compiling down your code, often into a singular css file. Meaning an @import has already been handled and included for you. You just reference the end-point stylesheet.

So no. Knock yourself out, when using a pre-processor. It's a great way to organise your code.

Upvotes: 0

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

This would still mean three HTTP-request, and there it most likely make the load process even slower, as Jros mention.

Instead I suggest that you minify all your CSS into one file, to make as few HTTP-requests as possible, and to decrease the amount of data that needs to be transferred.

Here's an example of a CSS minifying tool you can use, if you don't want to do it server-side.

Upvotes: 0

Jared
Jared

Reputation: 12524

I would recommend not using @import. This stops the browser from downloading files in parallel as it has to parse the first css file. Then go retrieve the import css files and import them.

google on @import

As you mentioned combining and minifying your css is the best option. Using a tool like minify allows you to keep your stylesheets separate and clean but serve them combined and minified.

Upvotes: 4

Related Questions