Drupal 7 Breaks CSS Rule Ordering Standards when CSS Aggregation is Turned On Drupal 7 has an interesting bug (some may consider this a feature) when rules are included before an external CSS document is included using @import. The CSS Aggregation engine will let you "bend the rules" by declaring CSS before calling external stylesheets with @import. While there are very different solutions provided here, they both solve the issue.

Example CSS:

This example works with CSS Aggregation turned ON but will not work if CSS Aggregation is OFF.

* { margin: 0; padding: 0; box-sizing: border-box; }
@import 'header.css';
@import 'component-a.css';
@import 'component-b.css';
@import 'footer.css';


My assumption is that Drupal 7 CSS Aggregation engine actually fetches the contents of the @import calls and appends the contents to the main file as a subroutine.



Solution:

The solution was to follow the CSS standards by moving all of the @import calls to the top of the document, before declaring rules internally.

@import 'header.css';
@import 'component-a.css';
@import 'component-b.css';
@import 'footer.css';
* { margin: 0; padding: 0; box-sizing: border-box; }


While this question was originally marked as "off-topic", I think it's still important to illustrate how CSS is interpreted by the Drupal 7 CSS Aggregation Engine. It should be understood that these two different methods are VERY DIFFERENT in the way they are interpreted since CSS is sensitive to rule ordering.



More Accurate Solution:

The more accurate solution to this problem would be to include the first line in another CSS document, for instance reset.css.

@import 'reset.css';
@import 'header.css';
@import 'component-a.css';
@import 'component-b.css';
@import 'footer.css';




I hope this helps other people understand the nuances of the Drupal 7 CSS Aggregation engine.
Solved my own question. There were rules that came before the @import. So this wasn't a Drupal 7 issue, it was a CSS interpretation error.