Re: @import -- allow at any place in stylesheet.

On Mon, Jan 16, 2012 at 7:36 AM, Marat Tanalin | tanalin.com
<mtanalin@yandex.ru> wrote:
> Hello. It makes sense to allow @import at any place in CSS stylesheet.
>
> For example, if we have:
>
>    .rule-before-example {...}
>    .example {...}
>    .rule-after-example {...}
>
> We could have same expressed with @import:
>
>    @import "before-example.css";
>    .example {...}
>    @import "after-example.css";
>
> where "after-example.css" contains:
>
>    .rule-after-example {...}
>
> (Real-world imported stylesheets are, of course, much larger.)
>
> So why should @import be disallowed here for importing "after-example.css"? This just makes development less usable/flexible.

What does this help with?

The restriction that @import has to appear at the top of a file is
meant, I believe, to make it easier to understand that other files are
being imported.  A lone @import in the middle of a file is easy to
accidentally skip over for a human.

Note that if you really want to interleave some imported code, you can
do so by just using *more* imports, like:

---top of file---
@import "before-example.css";
@import "example.css";
@import "after-example.css";

~TJ