[{"data":1,"prerenderedAt":854},["ShallowReactive",2],{"page-\u002Fcss":3},{"id":4,"title":5,"body":6,"description":846,"extension":847,"meta":848,"navigation":849,"path":850,"seo":851,"stem":852,"__hash__":853},"content\u002Fcss\u002Findex.md","CSS — Code-First Engineering Reference",{"type":7,"value":8,"toc":825},"minimark",[9,14,18,23,52,56,76,80,85,211,215,338,342,462,466,556,560,655,659,663,686,690,699,703,711,715,728,732,783,787,814,818,821],[10,11,13],"h1",{"id":12},"css-code-first-engineering-reference","🎨 CSS — Code-First Engineering Reference",[15,16,17],"p",{},"A 22-chapter deep-dive reference for mid-to-senior engineers. Each chapter is structured around annotated production code: complex implementations, anti-pattern→correct pairs, performance tips, and edge cases. Minimal prose, maximum code. DevTools is the REPL.",[19,20,22],"h2",{"id":21},"how-to-use-this-reference","How to Use This Reference",[24,25,26,34,40,46],"ol",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Read sequentially"," (01 → 22) for a structured engine-deep path.",[27,35,36,39],{},[30,37,38],{},"Jump to a chapter"," when you hit a concept in production — every chapter is self-contained.",[27,41,42,45],{},[30,43,44],{},"Skim the anti-pattern → correct pairs"," — they're the highest-signal sections.",[27,47,48,51],{},[30,49,50],{},"Read the 🧠 Spot the Bug"," at the end of each chapter before checking the answer.",[19,53,55],{"id":54},"prerequisites","Prerequisites",[57,58,59,67,70,73],"ul",{},[27,60,61,62,66],{},"A modern browser (Chrome, Firefox, Safari, Edge). DevTools (",[63,64,65],"code",{},"Cmd+Opt+I",").",[27,68,69],{},"A code editor (VS Code recommended).",[27,71,72],{},"Working HTML knowledge.",[27,74,75],{},"Comfort reading CSS — this is a reference, not a beginner tutorial.",[19,77,79],{"id":78},"curriculum","Curriculum",[81,82,84],"h3",{"id":83},"part-i-engine-foundations","Part I — Engine Foundations",[86,87,88,104],"table",{},[89,90,91],"thead",{},[92,93,94,98,101],"tr",{},[95,96,97],"th",{},"#",[95,99,100],{},"Topic",[95,102,103],{},"Why It Matters",[105,106,107,127,141,162,194],"tbody",{},[92,108,109,113,120],{},[110,111,112],"td",{},"01",[110,114,115],{},[116,117,119],"a",{"href":118},"\u002Fcss\u002F01-introduction-and-setup","CSS Engine Internals & Production Setup",[110,121,122,123,126],{},"Parse → box tree → cascade → layout → paint → composite. ",[63,124,125],{},"@layer"," architecture from line one.",[92,128,129,132,138],{},[110,130,131],{},"02",[110,133,134],{},[116,135,137],{"href":136},"\u002Fcss\u002F02-selectors-and-specificity","Selectors, Specificity & the Cascade Algorithm",[110,139,140],{},"Right-to-left matching, the 4-tuple specificity, cascade layers as the precedence primitive.",[92,142,143,146,152],{},[110,144,145],{},"03",[110,147,148],{},[116,149,151],{"href":150},"\u002Fcss\u002F03-box-model","The Box Model: Formatting Contexts & Margin Collapse",[110,153,154,157,158,161],{},[63,155,156],{},"box-sizing",", BFC, margin-collapse rules, the ",[63,159,160],{},"min-width: auto"," flex\u002Fgrid killer.",[92,163,164,167,173],{},[110,165,166],{},"04",[110,168,169],{},[116,170,172],{"href":171},"\u002Fcss\u002F04-colors-and-units","Color Spaces, Units & the Fluid Math of CSS",[110,174,175,176,179,180,179,183,179,186,189,190,193],{},"OKLCH perceptual uniformity, em\u002Frem compounding, ",[63,177,178],{},"calc","\u002F",[63,181,182],{},"min",[63,184,185],{},"max",[63,187,188],{},"clamp",", ",[63,191,192],{},"color-mix",".",[92,195,196,199,205],{},[110,197,198],{},"05",[110,200,201],{},[116,202,204],{"href":203},"\u002Fcss\u002F05-typography-and-text","Typography Engine: Font Loading & Text Overflow",[110,206,207,210],{},[63,208,209],{},"font-display"," strategies, variable font axes, unitless line-height, single\u002Fmulti-line truncation.",[81,212,214],{"id":213},"part-ii-layout-algorithms","Part II — Layout Algorithms",[86,216,217,227],{},[89,218,219],{},[92,220,221,223,225],{},[95,222,97],{},[95,224,100],{},[95,226,103],{},[105,228,229,246,263,295,318],{},[92,230,231,234,240],{},[110,232,233],{},"06",[110,235,236],{},[116,237,239],{"href":238},"\u002Fcss\u002F06-display-and-positioning","Display, Position & the Containing Block",[110,241,242,243,193],{},"Formatting contexts, the five position schemes, the transform-ancestor trap that breaks ",[63,244,245],{},"fixed",[92,247,248,251,257],{},[110,249,250],{},"07",[110,252,253],{},[116,254,256],{"href":255},"\u002Fcss\u002F07-flexbox","Flexbox: One-Dimensional Layout & the flex Algorithm",[110,258,259,260,262],{},"grow\u002Fshrink\u002Fbasis resolution, ",[63,261,160],{},", gap, the app-layout pattern.",[92,264,265,268,274],{},[110,266,267],{},"08",[110,269,270],{},[116,271,273],{"href":272},"\u002Fcss\u002F08-css-grid","CSS Grid: Two-Dimensional Layout & Track Resolution",[110,275,276,279,280,283,284,287,288,189,291,294],{},[63,277,278],{},"fr"," distribution, ",[63,281,282],{},"minmax(0, 1fr)"," overflow fix, ",[63,285,286],{},"auto-fit"," vs ",[63,289,290],{},"auto-fill",[63,292,293],{},"grid-template-areas",", subgrid.",[92,296,297,300,306],{},[110,298,299],{},"09",[110,301,302],{},[116,303,305],{"href":304},"\u002Fcss\u002F09-responsive-design","Responsive Design: Media Queries, Container Queries & Fluid CSS",[110,307,308,309,179,311,313,314,317],{},"Mobile-first, fluid ",[63,310,188],{},[63,312,286],{},", container queries, ",[63,315,316],{},"prefers-*"," media features.",[92,319,320,323,329],{},[110,321,322],{},"10",[110,324,325],{},[116,326,328],{"href":327},"\u002Fcss\u002F10-floats-and-positioning","Floats, z-index & the Stacking Context Model",[110,330,331,332,189,335,193],{},"Stacking-context creation rules, the ancestor-z-index trap, ",[63,333,334],{},"isolation: isolate",[63,336,337],{},"clip-path",[81,339,341],{"id":340},"part-iii-visual-compositing","Part III — Visual Compositing",[86,343,344,354],{},[89,345,346],{},[92,347,348,350,352],{},[95,349,97],{},[95,351,100],{},[95,353,103],{},[105,355,356,381,406,431],{},[92,357,358,361,367],{},[110,359,360],{},"11",[110,362,363],{},[116,364,366],{"href":365},"\u002Fcss\u002F11-backgrounds-and-gradients","Backgrounds & Gradients: Layering & the Shorthand Reset Trap",[110,368,369,370,373,374,376,377,380],{},"Multiple layers, ",[63,371,372],{},"background-size"," ",[63,375,179],{}," syntax, ",[63,378,379],{},"background-clip: text",", conic-gradient pie charts.",[92,382,383,386,392],{},[110,384,385],{},"12",[110,387,388],{},[116,389,391],{"href":390},"\u002Fcss\u002F12-borders-shadows-and-outlines","Borders, Shadows, Outlines & Focus States",[110,393,394,395,287,398,401,402,405],{},"Layered elevation, ",[63,396,397],{},"outline",[63,399,400],{},"border"," (layout shift), ",[63,403,404],{},":focus-visible",", the overflow-clips-shadow trap.",[92,407,408,411,417],{},[110,409,410],{},"13",[110,412,413],{},[116,414,416],{"href":415},"\u002Fcss\u002F13-animations-and-transitions","Animations & Transitions: The Compositor Pipeline",[110,418,419,420,423,424,427,428,193],{},"GPU vs layout-triggering properties, ",[63,421,422],{},"cubic-bezier"," overshoot, the ",[63,425,426],{},"height: auto"," trap, ",[63,429,430],{},"grid-template-rows",[92,432,433,436,442],{},[110,434,435],{},"14",[110,437,438],{},[116,439,441],{"href":440},"\u002Fcss\u002F14-filters-blend-modes-and-masking","Filters, Blend Modes & Masking: Compositing Pipeline",[110,443,444,287,447,189,450,453,454,457,458,461],{},[63,445,446],{},"drop-shadow",[63,448,449],{},"box-shadow",[63,451,452],{},"backdrop-filter"," translucency, ",[63,455,456],{},"mix-blend-mode"," contexts, ",[63,459,460],{},"mask"," soft fades.",[81,463,465],{"id":464},"part-iv-modern-css-primitives","Part IV — Modern CSS Primitives",[86,467,468,478],{},[89,469,470],{},[92,471,472,474,476],{},[95,473,97],{},[95,475,100],{},[95,477,103],{},[105,479,480,498,512,539],{},[92,481,482,485,491],{},[110,483,484],{},"15",[110,486,487],{},[116,488,490],{"href":489},"\u002Fcss\u002F15-css-variables","CSS Variables: Custom Properties as the Theming Engine",[110,492,493,494,497],{},"Cascade\u002Finheritance, invalid-value semantics, runtime theming, JS ",[63,495,496],{},"setProperty"," bridge.",[92,499,500,503,509],{},[110,501,502],{},"16",[110,504,505],{},[116,506,508],{"href":507},"\u002Fcss\u002F16-logical-properties-and-writing-modes","Logical Properties & Writing Modes: i18n-Ready CSS",[110,510,511],{},"inline\u002Fblock axes, logical equivalents, vertical-rl, the logical\u002Fphysical mixing trap.",[92,513,514,517,527],{},[110,515,516],{},"17",[110,518,519],{},[116,520,522,523,526],{"href":521},"\u002Fcss\u002F17-modern-css-features","Modern CSS (2023+): Nesting, ",[524,525],"has",{},"(), Layers & color-mix",[110,528,529,530,189,533,535,536,538],{},"Native nesting, ",[63,531,532],{},":has()",[63,534,125],{},", container style queries, ",[63,537,192],{},", scroll-driven animations.",[92,540,541,544,550],{},[110,542,543],{},"18",[110,545,546],{},[116,547,549],{"href":548},"\u002Fcss\u002F18-architecture-and-methodology","Architecture: BEM, OOCSS, ITCSS, Atomic & Cascade Layers",[110,551,552,553,555],{},"Flat-specificity naming, structure\u002Fskin separation, ",[63,554,125],{}," as the native architecture primitive.",[81,557,559],{"id":558},"part-v-production-engineering","Part V — Production Engineering",[86,561,562,572],{},[89,563,564],{},[92,565,566,568,570],{},[95,567,97],{},[95,569,100],{},[95,571,103],{},[105,573,574,598,620,641],{},[92,575,576,579,585],{},[110,577,578],{},"19",[110,580,581],{},[116,582,584],{"href":583},"\u002Fcss\u002F19-performance","CSS Performance: Render Path, Containment & GPU Layers",[110,586,587,588,189,591,189,594,597],{},"Critical CSS, layout thrashing, ",[63,589,590],{},"content-visibility: auto",[63,592,593],{},"contain",[63,595,596],{},"will-change"," memory cost.",[92,599,600,603,609],{},[110,601,602],{},"20",[110,604,605],{},[116,606,608],{"href":607},"\u002Fcss\u002F20-browser-compatibility","Browser Compatibility: Prefixes, @supports & Progressive Enhancement",[110,610,611,612,615,616,619],{},"Autoprefixer\u002Fbrowserslist, ",[63,613,614],{},"@supports"," feature detection, the Safari ",[63,617,618],{},"-webkit-"," laggard trap.",[92,621,622,625,631],{},[110,623,624],{},"21",[110,626,627],{},[116,628,630],{"href":629},"\u002Fcss\u002F21-preprocessors-and-build-tools","Preprocessors & Build Tools: Sass, PostCSS, Vite & CSS Modules",[110,632,633,636,637,640],{},[63,634,635],{},"@use"," vs deprecated ",[63,638,639],{},"@import",", compile-time vs runtime variables, PostCSS chains, CSS Modules.",[92,642,643,646,652],{},[110,644,645],{},"22",[110,647,648],{},[116,649,651],{"href":650},"\u002Fcss\u002F22-exercises-and-projects","Exercises & Projects: Production CSS Systems",[110,653,654],{},"7 projects: layered reset, navbar, grid dashboard, glassmorphism, tooltips, loaders, capstone.",[19,656,658],{"id":657},"learning-path-suggestions","Learning Path Suggestions",[81,660,662],{"id":661},"mid-level-developer-moving-to-senior","Mid-level developer moving to senior",[15,664,665,666,668,669,672,673,676,677,189,679,681,682,685],{},"Read 01 (engine + ",[63,667,125],{},"), 02 (cascade algorithm), 07–08 (flex\u002Fgrid algorithms — the ",[63,670,671],{},"min-width"," and ",[63,674,675],{},"minmax(0,1fr)"," traps), 13 (compositor pipeline — what animates at 60fps), 17 (",[63,678,532],{},[63,680,125],{},", container queries), 19 (render path + ",[63,683,684],{},"content-visibility","), 18 (architecture).",[81,687,689],{"id":688},"coming-from-a-framework-reactvuetailwind","Coming from a framework (React\u002FVue\u002FTailwind)",[15,691,692,693,695,696,698],{},"Read 02 (specificity — you've been insulated), 06 (containing block — the ",[63,694,245],{}," + transform trap), 08 (grid track resolution), 13 (which properties animate on GPU), 15 (CSS variables as the JS↔CSS bridge), 18 (BEM + ",[63,697,125],{}," vs utility-first).",[81,700,702],{"id":701},"senior-frontend-engineer","Senior frontend engineer",[15,704,705,706,189,708,710],{},"Skim 01–05. Read closely: 10 (stacking contexts — the cage model), 13 (compositor pipeline), 14 (compositing gotchas), 16 (logical properties for i18n), 17 (2023+ features), 19 (",[63,707,684],{},[63,709,593],{},", GPU layers), 21 (Sass vs CSS variables, build pipeline).",[81,712,714],{"id":713},"performance-focused","Performance-focused",[15,716,717,718,189,720,189,722,724,725,727],{},"Read 13 (compositor-only properties), 19 (render path, ",[63,719,590],{},[63,721,593],{},[63,723,596],{},"), 11 (shorthand reset trap), 05 (font loading, ",[63,726,209],{},"), 09 (fluid CSS vs media queries).",[19,729,731],{"id":730},"companion-resources","Companion Resources",[57,733,734,743,751,759,767,775],{},[27,735,736,742],{},[116,737,741],{"href":738,"rel":739},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS",[740],"nofollow","MDN CSS Docs"," — the definitive reference.",[27,744,745,750],{},[116,746,749],{"href":747,"rel":748},"https:\u002F\u002Fcaniuse.com",[740],"Can I Use"," — browser compatibility tables. Check Safari specifically.",[27,752,753,758],{},[116,754,757],{"href":755,"rel":756},"https:\u002F\u002Fweb.dev\u002Flearn\u002Fcss",[740],"web.dev CSS"," — Google's CSS learning material.",[27,760,761,766],{},[116,762,765],{"href":763,"rel":764},"https:\u002F\u002Fcss-tricks.com",[740],"CSS Tricks"," — practical guides and almanac.",[27,768,769,774],{},[116,770,773],{"href":771,"rel":772},"https:\u002F\u002Fwww.joshwcomeau.com\u002Fcss\u002F",[740],"Josh W. Comeau's CSS Tutorials"," — intuitive explanations.",[27,776,777,782],{},[116,778,781],{"href":779,"rel":780},"https:\u002F\u002Fcssgradient.io",[740],"CSS Gradient Generator"," — visual gradient tool.",[19,784,786],{"id":785},"tooling","Tooling",[788,789,791],"code-wrapper",{"language":790},"bash",[792,793,797],"pre",{"className":794,"code":795,"language":790,"meta":796,"style":796},"language-bash shiki shiki-themes github-light github-dark","# VS Code extensions: Live Server (hot reload), CSS Peek (jump to definition), Tailwind IntelliSense (if Tailwind)\n# Browser DevTools: Cmd+Opt+I → Elements\u002FInspector. Coverage tab (unused CSS), Rendering tab (paint flashing, CLS), Layers panel (GPU layers).\n","",[63,798,799,808],{"__ignoreMap":796},[800,801,804],"span",{"class":802,"line":803},"line",1,[800,805,807],{"class":806},"sdCPZ","# VS Code extensions: Live Server (hot reload), CSS Peek (jump to definition), Tailwind IntelliSense (if Tailwind)\n",[800,809,811],{"class":802,"line":810},2,[800,812,813],{"class":806},"# Browser DevTools: Cmd+Opt+I → Elements\u002FInspector. Coverage tab (unused CSS), Rendering tab (paint flashing, CLS), Layers panel (GPU layers).\n",[19,815,817],{"id":816},"license","License",[15,819,820],{},"These notes are yours to use, share, and modify.",[822,823,824],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":796,"searchDepth":810,"depth":810,"links":826},[827,828,829,837,843,844,845],{"id":21,"depth":810,"text":22},{"id":54,"depth":810,"text":55},{"id":78,"depth":810,"text":79,"children":830},[831,833,834,835,836],{"id":83,"depth":832,"text":84},3,{"id":213,"depth":832,"text":214},{"id":340,"depth":832,"text":341},{"id":464,"depth":832,"text":465},{"id":558,"depth":832,"text":559},{"id":657,"depth":810,"text":658,"children":838},[839,840,841,842],{"id":661,"depth":832,"text":662},{"id":688,"depth":832,"text":689},{"id":701,"depth":832,"text":702},{"id":713,"depth":832,"text":714},{"id":730,"depth":810,"text":731},{"id":785,"depth":810,"text":786},{"id":816,"depth":810,"text":817},"A 22-chapter code-first CSS reference for mid-to-senior engineers. Engine internals, cascade layers, box-model formatting contexts, flex\u002Fgrid algorithms, container queries, the compositor pipeline, GPU layers, i18n logical properties, and production architecture. Dense annotated code, anti-pattern→correct pairs, edge cases, and gotchas.","md",{},true,"\u002Fcss",{"title":5,"description":846},"css\u002Findex","ZfMrF_TBg3hbxFCDj8vHJxzP6inOQZMuUrjNpHpU5IE",1789924647621]