Virtual DOM

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.

Memoization in React is a performance optimization that caches the result of expensive computations or component renders to avoid redundant work on re-renders. React provides `React.memo()` to skip re-rendering a component when its props haven't changed, `useMemo()` to cache computed values, and `useCallback()` to cache function references. While powerful, premature memoization adds complexity — it's best applied after profiling confirms an actual performance bottleneck.

BEM (Block Element Modifier) is a CSS naming convention that structures class names as `.block__element--modifier` to create clear, predictable relationships between HTML and CSS. For example, `.card__title--highlighted` identifies a highlighted title element within a card block. While modern tooling like CSS Modules and utility frameworks have reduced BEM's necessity, it remains widely used in large codebases and design systems where explicit naming conventions aid team coordination.

React's Context API provides a way to pass data through the component tree without manually threading props through every intermediate level. You create a context with `createContext`, wrap a subtree with a `Provider`, and consume the value anywhere below with `useContext`. It's ideal for global concerns like themes, authentication state, or locale, but should be used judiciously since any change to context value re-renders all consuming components.

Shadow DOM is a browser API that allows you to attach a hidden, encapsulated DOM tree to an element, isolating its styles and markup from the rest of the page. This means CSS defined inside a Shadow DOM won't leak out, and external styles won't bleed in. It's the core technology behind Web Components and is used by frameworks to achieve true style encapsulation without CSS naming conventions or tooling.

Progressive enhancement is a web development strategy that starts with a baseline of functional HTML content accessible to all browsers, then layers on CSS styling and JavaScript interactivity for more capable environments. This approach ensures that core functionality works everywhere, while users with modern browsers get a richer experience. It contrasts with graceful degradation, which starts with the full experience and tries to handle failures.