edx/edx-platform — pull request #1189 by talbs (2013-10-01 19:19:17+00:00)
Title: Studio: Revised CSS Architecture (resolves STUD-806)

This Studio work helps to:

* resolve a known IE9 CSS Selector limit bug (STUD-806 - https://edx-wiki.atlassian.net/browse/STUD-806).
* better organize and reference vendor-specific CSS (done now in a separate .css file and only through the Django Pipeline)
* separate out xmodule-related/dependant styles (for future removal once xblocks is live)
* provides better, more consistent names to our outputted CSS files
* move vendor-related CSS shared across apps (currently Font Awesome and Normalize) to the common directory
* prepare for other IE-specific bugs/support with IE-specific classes and IE Sass partial

There is a known trade-off. Currently, the xmodule Sass files (xmodule/descriptors/css/module-styles.scss and xmodule/modules/css/module-styles.scss) are referencing Sass variables, mixins, and extends we have defined elsewhere in Studio. Because of this, style-xmodule.scss has to re-import these needs assets, which causes redundancy in the compiled style definitions that both style-app.css and style-xmodule.css (essentially, we're making the browser load/parse the a small subset of the same rules in two separate stylesheets - not great at all).

Hopefully with xblocks on the horizon, this redundancy can be removed and corrected. If that's not the case, we will need to discuss a permanent solution more.