CSS breaks when packed

Question

Let's say I have about 10 css files on my site. I wanted to combine them into one. But when I combining them(just "concatenating" files, in order they are included into html), my style/layout breaks. It's not the problem of paths or something, just selectors doesn't work as before.

Am I missing something, or maybe my file is too big? What could be the problem? I thought there is no difference if styles are in one file or many(they shouldn't be) as long as order is preserved...

Cheers

Answer 1

Make sure you don't have @import directives in your files. According to CSS spec, it may be place only before other rules. All other imports are ignored.

For example:

1.css:

BODY {background: #fff; }

2.css:

@import "foobar.css";

1+2.css:

BODY {background: #fff; }
@import "foobar.css"; /* This import won't work. */