gitlabhq/gitlabhq — pull request #2307 by riyad (2012-12-18 23:24:59+00:00)
Title: Split CSS files

This is an **ugly** hack trying to split the CSS files to stay [below 4096 selectors per file](http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits) necessary for IE. This is only meant as a *temporary solution*.

The problem:
* Bootstrap is **big**
* We override quite some stuff of it
* We use `@extend` for importing style rules
* Our styles are really sensitive to order

Bootstrap + our overrides are 3400+ selectors!!!

I have tried splitting the one big CSS file into several smaller ones:
* `vendor.css` includes all CSS from `vendor/assets` (luckily they have no dependencies) **296 selectors**
* `highlight.scss` contains the Pygments highlight styles (depends only on color variables) **246 selectors**
* `gitlab_bootstrap.scss` contains the pulled together Bootstrap styles + our overrides (ugly, big and brittle) **3438 selectors**
* `sections.scss` contains all section styles **without** `@extends` **223 selectors**
* `sections_extended.scss` contains all section styles **with** `@extends` (this means `gitlab_bootstrap.scss` needs to be included here) :/ **4050 selectors**
* `main.scss` conains the rest (headers, themes, common definitions) (also depends on `gitlab_bootstrap.scss`) **3841 selectors**
* `application.css` aggregates all of them (includes Bootstrap twice :shit: ) **8657 selectors**

Selectors counted with [this](http://snippet.bevey.com/css/selectorCount.php).

What we get:
* Non-IE browsers get served `application.css` as before.
* IE downloads the CSS files separately.

Caveat:
* `gitlab_bootstrap.scss` is included **twice**: in `main.scss` and `sections_extended.scss`
* You **can't** combine all styles depending on `gitlab_bootstrap.scss` into one, because it would be too big again :(

Fixes #1842
Fixes #2073