ES6 destructuring extracts values from arrays and objects with concise syntax. I use const [a, b] = array for array destructuring and const {name, age} = obj for objects. The spread operator ... expands iterables in arrays, objects, and function argum

Array methods enable functional programming patterns in JavaScript. The .map() method transforms each element and returns new array. I use .filter() to create arrays with elements meeting criteria. The .reduce() method accumulates values into single r

Promises represent eventual completion or failure of asynchronous operations. I create promises with new Promise((resolve, reject) => {}) executor function. The .then() method chains successful results while .catch() handles errors. Using .finally(

Closures allow functions to access variables from outer scopes even after outer function returns. I create closures when inner functions reference outer function variables. Lexical scope means functions look up variables where they're defined, not whe

BEM (Block Element Modifier) naming uses .block__element--modifier pattern for scalable CSS. I define blocks as independent components like .card. Elements within blocks use .card__title and .card__body. Modifiers indicate variations with .card--featu

Container queries enable responsive components based on container size using @container at-rule. I set container-type: inline-size to create query containers. The @container (min-width: 400px) queries container width instead of viewport. Named contain

Pseudo-classes select elements based on state like :hover, :focus, :active, and :visited. I use :nth-child() and :nth-of-type() for pattern-based selection. The :first-child, :last-child, and :only-child target specific positions. Form pseudo-classes

CSS transitions animate property changes with transition: property duration timing-function delay. I use transition-property to specify which properties animate. The timing-function controls acceleration with values like ease, ease-in, ease-out, cubic

CSS custom properties define reusable values with --variable-name syntax and access with var(--variable-name). I scope variables at :root for global access or within selectors for local scope. Variables cascade and inherit unlike preprocessor variable

Media queries adapt layouts to different screen sizes using @media rules with breakpoints. I use mobile-first approach starting with base mobile styles and progressively enhancing with min-width queries. Common breakpoints are 640px (sm), 768px (md),

CSS specificity determines which styles apply when multiple rules target the same element. I calculate specificity as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Inline styles have highest specificity at 1000. ID select

CSS positioning controls element placement with static, relative, absolute, fixed, and sticky values. The position: relative creates a positioning context without removing from document flow. Using position: absolute removes elements from flow and pos