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
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 ofpadding-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 - 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