Advanced
CSS · Proficient - advanced patterns and performance
- CSS variables and the calc/clamp functionsMaster custom properties, how they resolve at runtime within the cascade, and the calc() and clamp() functions for fluid interfaces.
- Transitions and animations: @keyframes, transform, timingAnimate on the compositor with transform and opacity, structure your @keyframes, and respect users' motion preferences.
- Modern selectors: :has, :is, :where, advanced :nth-childLeverage the recent functional pseudo-classes to select based on content, group selectors without inflating specificity, and target complex patterns.
- CSS architecture: BEM, utility-first, file organizationCompare BEM and the utility-first approach, their real trade-offs in a team, and structure your files with cascade layers.
- Container queries and CSS nestingMake your components responsive to their container rather than the viewport, and structure your stylesheets with native nesting.