edx/edx-platform — pull request #1208 by talbs (2013-10-02 21:01:54+00:00)
Title: LMS: Revised CSS Architecture (resolves LMS_1020)

This LMS work helps to:

* resolve a known IE9 CSS Selector limit bug (LMS-1020- https://edx-wiki.atlassian.net/browse/LMS-1020).
* provides better, more consistent names to our outputted CSS files
* move vendor-related CSS to be loaded when needed (overall vs. in-courseware)

This work brought up large concerns:

1. This resolves the bug noted above, but is far from ideal. Given that the LMS Sass architecture (the individual files, the inheritance/dependency within them, and the unorganized styling across the app), I could not find a logical/semantic way to segment the application.scss (generated by application.scss.mako for alpha-level theming reasons). Thus the separate CSS files are suffixed with -extend1 and -extend2.
2. Also, there is a ton of redundancy where each application(-extend*).css file is calling the same Sass set-up files, generating redundant styling rules that are already cached in its sibling files (essentially, we're making the browser load/parse a subset of the same rules in two separate stylesheets - not great at all).

These two points really concern me and I highly recommend a very deep revamp/cleaning of the Sass architecture shortly. I've tested the display of many pages locally, but each page's display should really be stress-tested to ensure there are no visual regressions. If you want to test the number of rules being used, crack open your console and run this gist in a view - https://gist.github.com/psebborn/1885511