css

CSS transitions animate between two states on property changes, while @keyframes animations define multi-step sequences with fine-grained control over timing, iteration, and direction — and only transform and opacity animations avoid costly layout recalculations.

CSS custom properties (--variable) are live, cascading values accessed via var() that can be scoped, inherited, overridden at any level, and manipulated with JavaScript at runtime — fundamentally different from preprocessor variables that are static and compiled away.

CSS Grid provides two-dimensional layout control over rows and columns simultaneously, using grid-template definitions, the fr unit for fractional space, auto-fit/auto-fill for responsive grids, and named grid areas for semantic layout declarations.

Modern CSS architecture offers four main approaches — BEM naming conventions, CSS Modules for build-time scoping, CSS-in-JS libraries for dynamic runtime styles, and utility-first frameworks like Tailwind that eliminate custom CSS entirely — each with distinct trade-offs in performance, maintainability, and framework compatibility.