Track
CSS
Review layout, responsive styling, contrast, and maintainable selectors.
- 01
Box model sizing
Make element dimensions predictable when padding and borders are part of the component.
box modellayoutsizing - 02
Cascade and specificity
Keep selectors scoped and low-specificity so styles are easy to override intentionally.
cascadespecificityselectors - 03
Flex layout boundaries
Keep flex spacing and alignment local to the component that owns the layout.
layoutflexboxspacing - 04
Grid layout tracks
Use grid tracks to describe responsive columns instead of hand-balancing fixed widths.
layoutgridresponsive - 05
Responsive units
Use responsive ranges that respect readable text and container context.
responsivetypographyspacing - 06
Color contrast states
Define interactive states that remain visible and readable.
accessibilitystatescontrast - 07
State selectors and focus-visible
Style hover, active, selected, and keyboard focus states as separate reviewable behavior.
accessibilitystatesfocus - 08
Logical properties
Use flow-relative spacing and borders when styles should adapt to writing direction.
internationalizationlayoutmaintainability - 09
Custom properties as design tokens
Use custom properties to name shared design decisions instead of repeating magic values.
design tokenscustom propertiesmaintainability - 10
Motion and reduced motion
Make motion purposeful and respect users who request less animation.
accessibilitymotionpreferences
Related tracks
Keep learning inside the same language family.