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](https://jonassebastianohlsson.com/specificity-graph/) 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  here is an actual selector from our codebase  ### 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 - code search for `@include btn-`, some files outside of buttons.scss should instead just use the button classes (in markup) - combine `tw_variables` and our own variable imports - see https://gitlab.com/gitlab-org/gitlab-ce/issues/38330 ### 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](https://www.youtube.com/watch?v=WvYtYL3YKkg) - 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 - [TLDR recap](https://www.youtube.com/watch?v=1OKZOV-iLj4&t=3158s) - [Converting existing codebase](https://youtu.be/1OKZOV-iLj4?t=3418) [CSS Workflow from the ground up](https://www.youtube.com/watch?v=ZVk3GQHfkbU) has 4 layer CSS abstraction: Base, Layout, Module, and Theme