Organizing my CSS into one bundled request

I have on many projects had very long CSS stylesheets. I would like to organize them into multiple files.

For example:

• main sections
• forms
• form elements
• layout elements

I think this would be really good for organization purposes.

But I’ve heard that each style tag, script tag and any external references are their own request.

So if I have page with 10 CSS files, is that going to result in 10 requests?
If so, is that ok? If so is there any way to bundle them into one request?

Example,

<link rel="stylesheet" type="text/css" href="styles/layout.css" group="pagestyles"/>
<link rel="stylesheet" type="text/css" href="styles/form.css" group="pagestyles"/>
<link rel="stylesheet" type="text/css" href="styles/elements.css" group="pagestyles"/>

I would hope that the browser would read all the links in the HTML head and request them at the same time.

You need to sign in to view this answers