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.

Every element is a rectangular box composed of content, padding, border, and margin layers — and the box-sizing property determines whether width and height apply to just the content (content-box) or include padding and border (border-box).

The @layer rule introduces explicit layers to the CSS cascade, allowing developers to control style priority by layer order rather than specificity — solving specificity wars in large codebases without resorting to !important.

Container queries let components adapt their styling based on the size of their parent container rather than the viewport — enabling truly reusable responsive components that work in any layout context.

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.

Flexbox is a one-dimensional layout model for distributing space and aligning items along a main axis and cross axis, with container properties controlling flow direction and item properties controlling grow, shrink, and basis behavior.

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.

CSS performance spans the rendering pipeline stages of style calculation, layout, paint, and compositing — with optimization strategies including critical CSS extraction, CSS containment, efficient selector patterns, and minimizing layout-triggering property changes.

The five position values (static, relative, absolute, fixed, sticky) each change how an element relates to the document flow and its containing block, while z-index and stacking contexts control layering order for overlapping elements.

Responsive design combines the viewport meta tag, media queries, fluid units (%, vw, rem, clamp()), and mobile-first methodology to create layouts that adapt gracefully from mobile screens to large desktops.

CSS selectors target elements for styling using type, class, ID, attribute, and pseudo-class/element patterns, with specificity calculated as a weighted score (inline > ID > class > element) that determines which rule wins when multiple selectors match the same element.

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.