Organizing Your Rules
Keep a stylesheet in order as it grows: know where the browser's default styles come from and tame them with a small reset, nest related rules, and sort your styles into cascade layers so the right ones always win.
Updated
Defaults and Resets
- Browser Defaults and a Small Reset (Apprentice): Every browser styles a page before your CSS arrives, with big headings, blue underlined links and margins you never wrote, and a short modern reset tames the defaults that get in your way without throwing away the useful ones.
CSS Nesting
- CSS Nesting (Journeyman): CSS nesting lets you write a rule inside another rule, so a component's parts, its hover state and its media queries live together in one place instead of scattered through the file.
Cascade Layers
- Cascade Layers with @layer (Journeyman): Cascade layers sort your rules into ranked groups such as reset, base, components and utilities, so a rule in a later layer wins whatever its selector, and specificity fights and !important stop being the way styles get settled.
Exercise: Organize the Board Game Café's Styles
- Exercise: Organize the Board Game Café's Styles (Journeyman): Sort Meeple's 260-line stylesheet into four cascade layers, nest the rules that belong together and remove every !important, while a check compares every style on the page with the original to prove nothing changed.