Lean Mean CSS Machine
summary
GitHub compiles Sass into two CSS files (split for IE9’s ~4,000‑selector limit) and uses octicons to cut image requests. A specificity checker by Josh Peek and regex CI tests detect unused classes and enforce max nesting; an experimental test flags unnecessary nested-only classes. Total selectors sit around ~7,600 (Twitter ~9,000, SoundCloud ~1,000); over two months refactoring removes ~600 selectors and trims the shipped CSS by ~10KB — the tooling catches regressions and the reductions stick.
AI-written summary · about
chapters (22)
- 0:00Intro
- 1:15Mean Lean CSS Machine
- 1:32Short introduction
- 2:56GitHub's setup
- 5:09When does one selector override another?
- 6:51Don't use !important
- 7:13Avoid adjoining classes
- 7:52Prefer direct descendant selectors
- 9:17Easier to test
- 9:27Look out for complicated selectors
- 10:26Use shorthands when available
- 10:53Don't use shorthands if they set values you don't need to set
- 11:27Animate only on the GPŮ
- 11:41Remove redundant properties
- 12:08Divide classnames with single dashes
- 12:313. Testing & linting
- 12:53Configurable tool for writing clean and consistent SCSS
- 16:40Refactoring CSS is an opporunity to refactor design
- 17:05Add features!
- 17:46We use shadows
- 17:57Don't confuse lack of visual complexity with easy to use
- 23:09When to refactor?
