Search code examples
csspacking

CSS breaks when packed

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

Solution

  • 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. */