Organize CSS

Think about how to stop these repeated "let's just nest for now and fix the pages/blah.scss later issues e.g. https://gitlab.com/gitlab-org/gitlab-ce/issues/34096

Will split into smaller issues as I think of things.

Goals

Reduce Specificity

Our current specificity graph, using CSS Specificity Graph Generator

the idea here is that low-specificity base styles (a, li, etc) are at the start of stylesheet, and specific ones such as .my-page > .my-special-component > td > a are near the end.

  • our current CSS is shown in blue
  • green shows a target graph, with very specific selectors only later in the sheet

Screen_Shot_2017-09-22_at_1.51.05_pm

here is an actual selector from our codebase

Screen_Shot_2017-09-22_at_4.48.16_pm_copy

Ideas

  • minimize page-specific styles, use component styles
  • Util classes. We have a few of these that seem to work ok
  • Build up commonly-grouped util styles into components. Single component class name is equivalent to a group of utils
  • prefer keywords in classnames over numbers. e.g. padding-compact instead of padding-12

Easy fixes

A breakdown of our current (compiled) CSS

0 - 900 atwho, select2, pikaday these are all from gems currently

1000 - 6000 - twbootstrap.scss

920 - 1100 normalise 3.0.3
1100 - 1200 embedded print stylesheet (wrapped in a print media query... why is this even here)
1200 - 3640 scaffold, type, grid, tables, forms buttons
3640 - 3680 component animations
3680 - 4000 input groups
4000 - 4800 nav, navbar, breadcrumbs (excludes new nav)
4800 - 5800 pagination, pager, badges, alerts, progress bars, list groups, wells, close, panels
5800 - 6250 JS Components: modals, tooltips, popovers

6250 - 24000 - framework/*.scss

over 100kb of emoji-sprites CSS
All remaining Framework stylesheets

24000 - 27000 every font awesome icon
This should be split (or grouped with emoji sprite CSS)

27000 - 45000 Pages
Page specific styles and overrides. Most of this should live in components. There are also a looooooooooooot of duplicate overrides in places that should come from base styles

45000 - 47700 - Themes
We only need 20% of this (single theme)

47700 - 48000 - Misc
Dropzone, cropper, etc

Links

Explanation of our nesting problem: https://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-cascade

Trivago CSS Refactor - from ~50k lines of CSS

https://isellsoap.github.io/specificity-visualizer/

Spacing
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091

http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
https://www.smashingmagazine.com/2015/12/lessons-learned-in-big-app-development-hawaiian-airlines/

https://css-tricks.com/need-css-utility-library/
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

ITCSS - https://www.youtube.com/watch?v=1OKZOV-iLj4

CSS Workflow from the ground up has 4 layer CSS abstraction: Base, Layout, Module, and Theme

Edited by Simon Knox