1

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.

closed as off-topic by Shawn Conn, Pierre.Vriens, Yusef Mohamadi, DRUPWAY, sanzante Mar 27 '17 at 9:52

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question was caused by a problem that can no longer be reproduced, was solved by a cache clear, or was a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers." – Shawn Conn, Pierre.Vriens, Yusef Mohamadi, DRUPWAY, sanzante
If this question can be reworded to fit the rules in the help center, please edit the question.

1

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.