Skip to content

Split CSS files

Matthias Käppler requested to merge github/fork/riyad/split-css-files-for-ie into master

Created by: riyad

This is an ugly hack trying to split the CSS files to stay below 4096 selectors per file 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 💩 ) 8657 selectors

Selectors counted with this.

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 (closed) Fixes #2073 (closed)

Merge request reports