Rescuing GitLab from CSS Bloat
summary
GitLab measures steadily rising CSS bytes and lines, hits over 500 routes, and faces monthly releases, so the team builds a component-first strategy: gzip, CDN and minify for immediate wins, migrate to Vue and Webpack, wrap Bootstrap into a GitLab UI view component library, and author a separate CSS lab framework layered on Bootstrap. Storybook, image-snapshot tests, review apps and semantic-release automate visual regression checks and NPM publishing so CSS replacements happen once per component instead of per page.
AI-written summary · about
chapters (44)
- 0:00Introduction
- 0:38About me
- 1:14What is GitLab
- 1:27GitLab is hiring
- 2:03What is CSS Bloat
- 2:31GitLab History
- 3:33Ruby on Rails
- 3:48Frontend Improvements
- 5:32CSS File Size
- 6:09CSS Code Complexity
- 7:07Open Source Code
- 8:01Page Specific CSS
- 8:44Inconsistencies
- 9:14Tips
- 10:09Gains
- 11:20ObjectOriented
- 12:11Operatory
- 13:10Smacks
- 14:22Disadvantages
- 15:38Blocks
- 15:52Modifiers
- 17:10CSSJS
- 17:43Advantages and Disadvantages
- 19:22Bootstrap Rework
- 19:53Button Rework
- 20:20Design System
- 21:09CSS Lab
- 21:29Bootstrap
- 21:54The Idea
- 22:27Challenges
- 22:46Goal
- 25:28Where are we
- 25:56Storybook
- 26:28Review Apps
- 26:59Image Snapshot
- 28:19Storybook Knob
- 29:11Readme
- 29:29Markdown
- 29:54Auto Publish
- 30:40Last Mile
- 31:17Ambitions
- 32:02Takeaways
- 32:57Resources
- 33:20Collab Swag
related talks
27mHow We Do Vue At GitLab
31mHow do we use Vue js in GitLab
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
43mPreprocessors, Components, and CSS in JS
31mBreaking up with the bundle
34mPreprocessors, Components, and CSS in JS or" How I Learned to Stop Worrying and Love the Website"
46mCSS Lint for Massive Sites
26mMoving on from runtime CSS-in-JS at scale