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

CSS Grid provides two-dimensional layout control for rows and columns simultaneously. I use display: grid to create grid containers. The grid-template-columns and grid-template-rows properties define track sizes. The fr unit distributes available spac

Flexbox provides one-dimensional layout for rows or columns. I use display: flex on containers to enable flexbox. The flex-direction property controls main axis direction (row, column, row-reverse, column-reverse). The justify-content property aligns

Meta tags provide metadata about HTML documents for search engines and social media. I use <meta name="description"> for search result snippets (150-160 characters). The viewport meta tag ensures responsive design on mobile devices. Open Graph t