Cheatsheet
CSS Cheatsheet
Flexbox, grid, and the modern CSS (container queries, cascade layers, :has) that finally shipped across browsers.
CSS has quietly become powerful. Container queries shipped in all major browsers in 2023. `:has()` (the parent selector) shipped in 2022–2023. Cascade layers and subgrid landed in the same window. If you learned CSS pre-2022, the modern feature set is the update path.
Flexbox
`display: flex; flex-direction: row | column; justify-content: center; align-items: center; gap: 1rem;` covers most cases.
Item control: `flex: 1 1 auto` (grow, shrink, basis), `align-self: end`, `order: -1`.
Grid
`display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;`.
Named areas: `grid-template-areas: 'header header' 'nav main' 'footer footer';`.
Auto-fit for responsive: `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`.
Modern selectors
`:has(> img)` — parent selector, finally.
`:is(a, button):hover` — group selectors.
`:where()` — like :is() but zero specificity.
`:not()` — negation.
Custom properties
`--color-brand: #f60;` then `color: var(--color-brand, red);` (fallback after comma).
Cascade like any other property — override in nested selectors.
Container queries
`container-type: inline-size;` on parent, then `@container (min-width: 400px) { ... }` in children. Component-level responsive layout without media queries.
Cascade layers
`@layer reset, base, components, utilities;` declares priority. Order in `@layer` declaration is authoritative.
Frequently asked questions
Flexbox or Grid?
Flexbox for 1D layouts. Grid for 2D layouts. Use both — they compose.
Do I still need media queries?
For page-level responsive design, yes. For component-level responsiveness, container queries are the modern tool.
Is `:has()` production-safe?
Yes for all modern browsers. Check caniuse if IE or older Safari support is a requirement.
Custom properties vs Sass variables?
Custom properties are runtime and reactive; Sass variables are compile-time. Prefer custom properties.
Should I still use BEM?
BEM naming is optional now. Scoped styles (CSS Modules, styled-components, Tailwind) or cascade layers cover the same organizational needs.
Keep exploring
Made for exam season
Pass that exam.
Turn your notes into flashcards and quizzes in seconds. Study smarter — start free today.