[{"data":1,"prerenderedAt":1858},["ShallowReactive",2],{"page-\u002Fcss\u002F01-introduction-and-setup":3},{"id":4,"title":5,"body":6,"description":1851,"extension":1852,"meta":1853,"navigation":66,"path":1854,"seo":1855,"stem":1856,"__hash__":1857},"content\u002Fcss\u002F01-introduction-and-setup.md","01 — CSS Engine Internals & Production Setup",{"type":7,"value":8,"toc":1838},"minimark",[9,13,17,22,262,267,388,586,614,618,873,877,909,952,956,982,1016,1020,1577,1581,1659,1663,1750,1754,1792,1835],[10,11,5],"h1",{"id":12},"_01-css-engine-internals-production-setup",[14,15,16],"p",{},"No hand-holding. CSS is a declarative render-tree DSL: the browser parses stylesheets into a rule list, matches selectors against the DOM to build a box tree, resolves the cascade, then walks layout → paint → composite. Every \"gotcha\" in CSS is a consequence of one of those stages. This chapter engineers the foundation: how the engine sees your CSS, and the architecture you should ship on day one.",[18,19,21],"h2",{"id":20},"how-the-browser-sees-a-stylesheet","How the Browser Sees a Stylesheet",[23,24,26],"code-wrapper",{"language":25},"css",[27,28,32],"pre",{"className":29,"code":30,"language":25,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark","\u002F* A \"rule\" = selector list + declaration block.\n   The engine tokenizes, parses into CSSOM, then matches. *\u002F\n@layer reset, base, components, utilities;  \u002F* layer order declared FIRST → fixes precedence for the whole sheet *\u002F\n\n@layer reset {\n  \u002F* Universal selector: specificity (0,0,0,0). Cheap to match,\n     but forces a style recalc on every element. Keep resets tiny. *\u002F\n  *, *::before, *::after {\n    box-sizing: border-box;   \u002F* width includes padding+border → math matches design specs *\u002F\n    margin: 0;                \u002F* nuke UA margins so spacing is a deliberate token, not inherited chaos *\u002F\n    padding: 0;\n  }\n}\n\n\u002F* At-rules (@media, @keyframes, @supports, @layer, @import) are\n   processed at parse time. @import MUST precede all other rules\n   except @charset — put it later and the engine silently drops it. *\u002F\n@supports (display: grid) {   \u002F* feature detection at parse time, not UA sniffing *\u002F\n  @layer base {\n    :root { --layout: grid; } \u002F* custom property: registered on :root, inherits to every descendant *\u002F\n  }\n}\n","",[33,34,35,44,50,61,68,74,80,86,113,132,149,162,168,174,179,185,191,197,220,229,252,257],"code",{"__ignoreMap":31},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sdCPZ","\u002F* A \"rule\" = selector list + declaration block.\n",[36,45,47],{"class":38,"line":46},2,[36,48,49],{"class":42},"   The engine tokenizes, parses into CSSOM, then matches. *\u002F\n",[36,51,53,57],{"class":38,"line":52},3,[36,54,56],{"class":55},"svdQ7","@layer",[36,58,60],{"class":59},"ssxIu"," reset, base, components, utilities;  \u002F* layer order declared FIRST → fixes precedence for the whole sheet *\u002F\n",[36,62,64],{"class":38,"line":63},4,[36,65,67],{"emptyLinePlaceholder":66},true,"\n",[36,69,71],{"class":38,"line":70},5,[36,72,73],{"class":59},"@layer reset {\n",[36,75,77],{"class":38,"line":76},6,[36,78,79],{"class":42},"  \u002F* Universal selector: specificity (0,0,0,0). Cheap to match,\n",[36,81,83],{"class":38,"line":82},7,[36,84,85],{"class":42},"     but forces a style recalc on every element. Keep resets tiny. *\u002F\n",[36,87,89,93,96,99,103,105,107,110],{"class":38,"line":88},8,[36,90,92],{"class":91},"sk71V","  *",[36,94,95],{"class":59},", ",[36,97,98],{"class":91},"*",[36,100,102],{"class":101},"sIsaT","::before",[36,104,95],{"class":59},[36,106,98],{"class":91},[36,108,109],{"class":101},"::after",[36,111,112],{"class":59}," {\n",[36,114,116,120,123,126,129],{"class":38,"line":115},9,[36,117,119],{"class":118},"snvgF","    box-sizing",[36,121,122],{"class":59},": ",[36,124,125],{"class":118},"border-box",[36,127,128],{"class":59},";   ",[36,130,131],{"class":42},"\u002F* width includes padding+border → math matches design specs *\u002F\n",[36,133,135,138,140,143,146],{"class":38,"line":134},10,[36,136,137],{"class":118},"    margin",[36,139,122],{"class":59},[36,141,142],{"class":118},"0",[36,144,145],{"class":59},";                ",[36,147,148],{"class":42},"\u002F* nuke UA margins so spacing is a deliberate token, not inherited chaos *\u002F\n",[36,150,152,155,157,159],{"class":38,"line":151},11,[36,153,154],{"class":118},"    padding",[36,156,122],{"class":59},[36,158,142],{"class":118},[36,160,161],{"class":59},";\n",[36,163,165],{"class":38,"line":164},12,[36,166,167],{"class":59},"  }\n",[36,169,171],{"class":38,"line":170},13,[36,172,173],{"class":59},"}\n",[36,175,177],{"class":38,"line":176},14,[36,178,67],{"emptyLinePlaceholder":66},[36,180,182],{"class":38,"line":181},15,[36,183,184],{"class":42},"\u002F* At-rules (@media, @keyframes, @supports, @layer, @import) are\n",[36,186,188],{"class":38,"line":187},16,[36,189,190],{"class":42},"   processed at parse time. @import MUST precede all other rules\n",[36,192,194],{"class":38,"line":193},17,[36,195,196],{"class":42},"   except @charset — put it later and the engine silently drops it. *\u002F\n",[36,198,200,203,206,209,211,214,217],{"class":38,"line":199},18,[36,201,202],{"class":55},"@supports",[36,204,205],{"class":59}," (",[36,207,208],{"class":118},"display",[36,210,122],{"class":59},[36,212,213],{"class":118},"grid",[36,215,216],{"class":59},") {   ",[36,218,219],{"class":42},"\u002F* feature detection at parse time, not UA sniffing *\u002F\n",[36,221,223,226],{"class":38,"line":222},19,[36,224,225],{"class":55},"  @layer",[36,227,228],{"class":59}," base {\n",[36,230,232,235,238,242,244,246,249],{"class":38,"line":231},20,[36,233,234],{"class":101},"    :root",[36,236,237],{"class":59}," { ",[36,239,241],{"class":240},"sCrzJ","--layout",[36,243,122],{"class":59},[36,245,213],{"class":118},[36,247,248],{"class":59},"; } ",[36,250,251],{"class":42},"\u002F* custom property: registered on :root, inherits to every descendant *\u002F\n",[36,253,255],{"class":38,"line":254},21,[36,256,167],{"class":59},[36,258,260],{"class":38,"line":259},22,[36,261,173],{"class":59},[263,264,266],"h3",{"id":265},"anti-pattern-the-throw-css-at-the-top-file","Anti-pattern: the \"throw CSS at the top\" file",[23,268,269],{"language":25},[27,270,272],{"className":29,"code":271,"language":25,"meta":31,"style":31},"\u002F* ❌ ANTI-PATTERN — unlayered, ad-hoc, specificity will spiral *\u002F\n* { margin: 0; }                      \u002F* reset mixed with no ordering *\u002F\n#header .btn { color: red; }          \u002F* ID selector → (0,1,1,0), unoverridable by classes *\u002F\n.btn { color: blue; }                 \u002F* (0,0,1,0) → loses to the ID above forever *\u002F\n.btn { color: blue !important; }      \u002F* arms race: now every override needs !important *\u002F\n\n@import url(\"theme.css\");             \u002F* ❌ placed AFTER rules → engine IGNORES it. Also serial+render-blocking *\u002F\n",[33,273,274,279,298,322,342,363,367],{"__ignoreMap":31},[36,275,276],{"class":38,"line":39},[36,277,278],{"class":42},"\u002F* ❌ ANTI-PATTERN — unlayered, ad-hoc, specificity will spiral *\u002F\n",[36,280,281,283,285,288,290,292,295],{"class":38,"line":46},[36,282,98],{"class":91},[36,284,237],{"class":59},[36,286,287],{"class":118},"margin",[36,289,122],{"class":59},[36,291,142],{"class":118},[36,293,294],{"class":59},"; }                      ",[36,296,297],{"class":42},"\u002F* reset mixed with no ordering *\u002F\n",[36,299,300,303,306,308,311,313,316,319],{"class":38,"line":52},[36,301,302],{"class":101},"#header",[36,304,305],{"class":101}," .btn",[36,307,237],{"class":59},[36,309,310],{"class":118},"color",[36,312,122],{"class":59},[36,314,315],{"class":118},"red",[36,317,318],{"class":59},"; }          ",[36,320,321],{"class":42},"\u002F* ID selector → (0,1,1,0), unoverridable by classes *\u002F\n",[36,323,324,327,329,331,333,336,339],{"class":38,"line":63},[36,325,326],{"class":101},".btn",[36,328,237],{"class":59},[36,330,310],{"class":118},[36,332,122],{"class":59},[36,334,335],{"class":118},"blue",[36,337,338],{"class":59},"; }                 ",[36,340,341],{"class":42},"\u002F* (0,0,1,0) → loses to the ID above forever *\u002F\n",[36,343,344,346,348,350,352,354,357,360],{"class":38,"line":70},[36,345,326],{"class":101},[36,347,237],{"class":59},[36,349,310],{"class":118},[36,351,122],{"class":59},[36,353,335],{"class":118},[36,355,356],{"class":55}," !important",[36,358,359],{"class":59},"; }      ",[36,361,362],{"class":42},"\u002F* arms race: now every override needs !important *\u002F\n",[36,364,365],{"class":38,"line":76},[36,366,67],{"emptyLinePlaceholder":66},[36,368,369,372,375,378,382,385],{"class":38,"line":82},[36,370,371],{"class":55},"@import",[36,373,374],{"class":118}," url",[36,376,377],{"class":59},"(",[36,379,381],{"class":380},"sJ6F3","\"theme.css\"",[36,383,384],{"class":59},");             ",[36,386,387],{"class":42},"\u002F* ❌ placed AFTER rules → engine IGNORES it. Also serial+render-blocking *\u002F\n",[23,389,390],{"language":25},[27,391,393],{"className":29,"code":392,"language":25,"meta":31,"style":31},"\u002F* ✓ PRODUCTION — explicit layer order, flat specificity, no @import *\u002F\n@layer reset, base, components, utilities;\n\n@layer reset {\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n}\n@layer base {\n  \u002F* ID never used for styling → specificity stays (0,0,1,0) max across the codebase *\u002F\n  .btn { color: var(--btn-fg, blue); }     \u002F* token with fallback: survives missing theme *\u002F\n}\n@layer components {\n  .btn--cta { color: var(--cta-fg, white); }  \u002F* later layer beats base regardless of specificity *\u002F\n}\n@layer utilities {\n  .u-text-cta { color: var(--cta-fg); }   \u002F* utilities layer always wins → one-off overrides are safe *\u002F\n}\n",[33,394,395,400,407,411,418,464,468,474,479,508,512,519,548,552,559,582],{"__ignoreMap":31},[36,396,397],{"class":38,"line":39},[36,398,399],{"class":42},"\u002F* ✓ PRODUCTION — explicit layer order, flat specificity, no @import *\u002F\n",[36,401,402,404],{"class":38,"line":46},[36,403,56],{"class":55},[36,405,406],{"class":59}," reset, base, components, utilities;\n",[36,408,409],{"class":38,"line":52},[36,410,67],{"emptyLinePlaceholder":66},[36,412,413,415],{"class":38,"line":63},[36,414,56],{"class":55},[36,416,417],{"class":59}," reset {\n",[36,419,420,422,424,426,428,430,432,434,436,439,441,443,446,448,450,452,454,457,459,461],{"class":38,"line":70},[36,421,92],{"class":91},[36,423,95],{"class":59},[36,425,98],{"class":91},[36,427,102],{"class":101},[36,429,95],{"class":59},[36,431,98],{"class":91},[36,433,109],{"class":101},[36,435,237],{"class":59},[36,437,438],{"class":118},"box-sizing",[36,440,122],{"class":59},[36,442,125],{"class":118},[36,444,445],{"class":59},"; ",[36,447,287],{"class":118},[36,449,122],{"class":59},[36,451,142],{"class":118},[36,453,445],{"class":59},[36,455,456],{"class":118},"padding",[36,458,122],{"class":59},[36,460,142],{"class":118},[36,462,463],{"class":59},"; }\n",[36,465,466],{"class":38,"line":76},[36,467,173],{"class":59},[36,469,470,472],{"class":38,"line":82},[36,471,56],{"class":55},[36,473,228],{"class":59},[36,475,476],{"class":38,"line":88},[36,477,478],{"class":42},"  \u002F* ID never used for styling → specificity stays (0,0,1,0) max across the codebase *\u002F\n",[36,480,481,484,486,488,490,493,495,498,500,502,505],{"class":38,"line":115},[36,482,483],{"class":101},"  .btn",[36,485,237],{"class":59},[36,487,310],{"class":118},[36,489,122],{"class":59},[36,491,492],{"class":118},"var",[36,494,377],{"class":59},[36,496,497],{"class":240},"--btn-fg",[36,499,95],{"class":59},[36,501,335],{"class":118},[36,503,504],{"class":59},"); }     ",[36,506,507],{"class":42},"\u002F* token with fallback: survives missing theme *\u002F\n",[36,509,510],{"class":38,"line":134},[36,511,173],{"class":59},[36,513,514,516],{"class":38,"line":151},[36,515,56],{"class":55},[36,517,518],{"class":59}," components {\n",[36,520,521,524,526,528,530,532,534,537,539,542,545],{"class":38,"line":164},[36,522,523],{"class":101},"  .btn--cta",[36,525,237],{"class":59},[36,527,310],{"class":118},[36,529,122],{"class":59},[36,531,492],{"class":118},[36,533,377],{"class":59},[36,535,536],{"class":240},"--cta-fg",[36,538,95],{"class":59},[36,540,541],{"class":118},"white",[36,543,544],{"class":59},"); }  ",[36,546,547],{"class":42},"\u002F* later layer beats base regardless of specificity *\u002F\n",[36,549,550],{"class":38,"line":170},[36,551,173],{"class":59},[36,553,554,556],{"class":38,"line":176},[36,555,56],{"class":55},[36,557,558],{"class":59}," utilities {\n",[36,560,561,564,566,568,570,572,574,576,579],{"class":38,"line":181},[36,562,563],{"class":101},"  .u-text-cta",[36,565,237],{"class":59},[36,567,310],{"class":118},[36,569,122],{"class":59},[36,571,492],{"class":118},[36,573,377],{"class":59},[36,575,536],{"class":240},[36,577,578],{"class":59},"); }   ",[36,580,581],{"class":42},"\u002F* utilities layer always wins → one-off overrides are safe *\u002F\n",[36,583,584],{"class":38,"line":187},[36,585,173],{"class":59},[14,587,588,592,593,597,598,601,602,605,606,609,610,613],{},[589,590,591],"strong",{},"Why:"," layer order is fixed by the ",[594,595,596],"em",{},"first"," ",[33,599,600],{},"@layer reset, base, …"," declaration. Later ",[33,603,604],{},"@layer base { … }"," appends into the already-positioned ",[33,607,608],{},"base"," layer. Unlayered rules beat ",[594,611,612],{},"all"," layered rules — that's the escape hatch, not a bug.",[18,615,617],{"id":616},"the-three-ways-css-enters-the-browser","The Three Ways CSS Enters the Browser",[23,619,621],{"language":620},"html",[27,622,625],{"className":623,"code":624,"language":620,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003C!-- 1. External \u003Clink> — cached, parallel (HTTP\u002F2), the only production choice for non-critical CSS -->\n\u003Clink rel=\"stylesheet\" href=\"\u002Fassets\u002Fapp.[hash].css\">\n\n\u003C!-- 2. Critical CSS inlined in \u003Chead> — bytes that block first paint go here; everything else async -->\n\u003Cstyle>\n  \u002F* above-the-fold rules only; inlined to remove a render-blocking round trip *\u002F\n  :root{--bg:#fff;--fg:#333}\n  body{background:var(--bg);color:var(--fg)}\n\u003C\u002Fstyle>\n\u003C!-- non-critical CSS: preload without blocking, swap to stylesheet onload -->\n\u003Clink rel=\"preload\" href=\"\u002Fassets\u002Fapp.[hash].css\" as=\"style\" onload=\"this.rel='stylesheet'\">\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fassets\u002Fapp.[hash].css\">\u003C\u002Fnoscript>\n\n\u003C!-- 3. Inline style=\"\" — specificity (1,0,0,0). Only for JS-driven dynamic values. -->\n\u003Cdiv style=\"--x: 42px; transform: translateX(var(--x))\">\u003C\u002Fdiv>\n",[33,626,627,632,660,664,669,678,683,713,747,756,761,812,843,847,852],{"__ignoreMap":31},[36,628,629],{"class":38,"line":39},[36,630,631],{"class":42},"\u003C!-- 1. External \u003Clink> — cached, parallel (HTTP\u002F2), the only production choice for non-critical CSS -->\n",[36,633,634,637,640,643,646,649,652,654,657],{"class":38,"line":46},[36,635,636],{"class":59},"\u003C",[36,638,639],{"class":91},"link",[36,641,642],{"class":101}," rel",[36,644,645],{"class":59},"=",[36,647,648],{"class":380},"\"stylesheet\"",[36,650,651],{"class":101}," href",[36,653,645],{"class":59},[36,655,656],{"class":380},"\"\u002Fassets\u002Fapp.[hash].css\"",[36,658,659],{"class":59},">\n",[36,661,662],{"class":38,"line":52},[36,663,67],{"emptyLinePlaceholder":66},[36,665,666],{"class":38,"line":63},[36,667,668],{"class":42},"\u003C!-- 2. Critical CSS inlined in \u003Chead> — bytes that block first paint go here; everything else async -->\n",[36,670,671,673,676],{"class":38,"line":70},[36,672,636],{"class":59},[36,674,675],{"class":91},"style",[36,677,659],{"class":59},[36,679,680],{"class":38,"line":76},[36,681,682],{"class":42},"  \u002F* above-the-fold rules only; inlined to remove a render-blocking round trip *\u002F\n",[36,684,685,688,691,694,697,700,703,706,708,711],{"class":38,"line":82},[36,686,687],{"class":101},"  :root",[36,689,690],{"class":59},"{",[36,692,693],{"class":240},"--bg",[36,695,696],{"class":59},":",[36,698,699],{"class":118},"#fff",[36,701,702],{"class":59},";",[36,704,705],{"class":240},"--fg",[36,707,696],{"class":59},[36,709,710],{"class":118},"#333",[36,712,173],{"class":59},[36,714,715,718,720,723,725,727,729,731,734,736,738,740,742,744],{"class":38,"line":88},[36,716,717],{"class":91},"  body",[36,719,690],{"class":59},[36,721,722],{"class":118},"background",[36,724,696],{"class":59},[36,726,492],{"class":118},[36,728,377],{"class":59},[36,730,693],{"class":240},[36,732,733],{"class":59},");",[36,735,310],{"class":118},[36,737,696],{"class":59},[36,739,492],{"class":118},[36,741,377],{"class":59},[36,743,705],{"class":240},[36,745,746],{"class":59},")}\n",[36,748,749,752,754],{"class":38,"line":115},[36,750,751],{"class":59},"\u003C\u002F",[36,753,675],{"class":91},[36,755,659],{"class":59},[36,757,758],{"class":38,"line":134},[36,759,760],{"class":42},"\u003C!-- non-critical CSS: preload without blocking, swap to stylesheet onload -->\n",[36,762,763,765,767,769,771,774,776,778,780,783,785,788,791,793,796,799,802,805,807,810],{"class":38,"line":151},[36,764,636],{"class":59},[36,766,639],{"class":91},[36,768,642],{"class":101},[36,770,645],{"class":59},[36,772,773],{"class":380},"\"preload\"",[36,775,651],{"class":101},[36,777,645],{"class":59},[36,779,656],{"class":380},[36,781,782],{"class":101}," as",[36,784,645],{"class":59},[36,786,787],{"class":380},"\"style\"",[36,789,790],{"class":101}," onload",[36,792,645],{"class":59},[36,794,795],{"class":380},"\"",[36,797,798],{"class":118},"this",[36,800,801],{"class":380},".",[36,803,804],{"class":59},"rel",[36,806,645],{"class":55},[36,808,809],{"class":380},"'stylesheet'\"",[36,811,659],{"class":59},[36,813,814,816,819,822,824,826,828,830,832,834,836,839,841],{"class":38,"line":164},[36,815,636],{"class":59},[36,817,818],{"class":91},"noscript",[36,820,821],{"class":59},">\u003C",[36,823,639],{"class":91},[36,825,642],{"class":101},[36,827,645],{"class":59},[36,829,648],{"class":380},[36,831,651],{"class":101},[36,833,645],{"class":59},[36,835,656],{"class":380},[36,837,838],{"class":59},">\u003C\u002F",[36,840,818],{"class":91},[36,842,659],{"class":59},[36,844,845],{"class":38,"line":170},[36,846,67],{"emptyLinePlaceholder":66},[36,848,849],{"class":38,"line":176},[36,850,851],{"class":42},"\u003C!-- 3. Inline style=\"\" — specificity (1,0,0,0). Only for JS-driven dynamic values. -->\n",[36,853,854,856,859,862,864,867,869,871],{"class":38,"line":181},[36,855,636],{"class":59},[36,857,858],{"class":91},"div",[36,860,861],{"class":101}," style",[36,863,645],{"class":59},[36,865,866],{"class":380},"\"--x: 42px; transform: translateX(var(--x))\"",[36,868,838],{"class":59},[36,870,858],{"class":91},[36,872,659],{"class":59},[263,874,876],{"id":875},"anti-pattern-inline-styles-for-static-presentation","Anti-pattern: inline styles for static presentation",[23,878,879],{"language":620},[27,880,882],{"className":623,"code":881,"language":620,"meta":31,"style":31},"\u003C!-- ❌ (1,0,0,0) specificity → no stylesheet rule without !important can override it; not cached; mixes concerns -->\n\u003Cp style=\"color:red;font-weight:bold\">Warning\u003C\u002Fp>\n",[33,883,884,889],{"__ignoreMap":31},[36,885,886],{"class":38,"line":39},[36,887,888],{"class":42},"\u003C!-- ❌ (1,0,0,0) specificity → no stylesheet rule without !important can override it; not cached; mixes concerns -->\n",[36,890,891,893,895,897,899,902,905,907],{"class":38,"line":46},[36,892,636],{"class":59},[36,894,14],{"class":91},[36,896,861],{"class":101},[36,898,645],{"class":59},[36,900,901],{"class":380},"\"color:red;font-weight:bold\"",[36,903,904],{"class":59},">Warning\u003C\u002F",[36,906,14],{"class":91},[36,908,659],{"class":59},[23,910,912],{"language":911},"javascript",[27,913,916],{"className":914,"code":915,"language":911,"meta":31,"style":31},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F ✓ Inline style is a *bridge for runtime values*. Set a custom property, let CSS do the rest.\nel.style.setProperty('--x', `${pointerX}px');   \u002F\u002F CSS: transform: translateX(var(--x))\n\u002F\u002F The custom property cascades; the transform logic lives in the stylesheet, overridable by classes.\n",[33,917,918,923,947],{"__ignoreMap":31},[36,919,920],{"class":38,"line":39},[36,921,922],{"class":42},"\u002F\u002F ✓ Inline style is a *bridge for runtime values*. Set a custom property, let CSS do the rest.\n",[36,924,925,928,931,933,936,938,941,944],{"class":38,"line":46},[36,926,927],{"class":59},"el.style.",[36,929,930],{"class":101},"setProperty",[36,932,377],{"class":59},[36,934,935],{"class":380},"'--x'",[36,937,95],{"class":59},[36,939,940],{"class":380},"`${",[36,942,943],{"class":59},"pointerX",[36,945,946],{"class":380},"}px');   \u002F\u002F CSS: transform: translateX(var(--x))\n",[36,948,949],{"class":38,"line":52},[36,950,951],{"class":380},"\u002F\u002F The custom property cascades; the transform logic lives in the stylesheet, overridable by classes.\n",[18,953,955],{"id":954},"devtools-as-a-css-repl-the-engines-view","DevTools as a CSS REPL — the Engine's View",[14,957,958,959,962,963,966,967,970,971,974,975,978,979,801],{},"The Styles pane shows matched rules ",[589,960,961],{},"sorted by cascade winner first",", struck-through losers below. Specificity is implicit in ordering. The ",[589,964,965],{},"Computed"," tab shows the ",[594,968,969],{},"resolved"," value after the cascade + inheritance — this is where ",[33,972,973],{},"1em"," reveals itself as ",[33,976,977],{},"16px"," and a broken rule reveals itself as ",[33,980,981],{},"initial",[23,983,985],{"language":984},"bash",[27,986,989],{"className":987,"code":988,"language":984,"meta":31,"style":31},"language-bash shiki shiki-themes github-light github-dark","# Coverage tab: Cmd+Shift+P → \"Coverage\" → load page.\n#   % unused per file → purge targets. Shipping 80% unused framework CSS shows here.\n# Rendering tab: Cmd+Shift+P → \"Rendering\" →\n#   Paint flashing (repaint regions), Layout Shift Regions (CLS), FPS meter.\n# Layers panel: shows compositor layers → each will-change\u002Ftransform creates one (RAM cost).\n",[33,990,991,996,1001,1006,1011],{"__ignoreMap":31},[36,992,993],{"class":38,"line":39},[36,994,995],{"class":42},"# Coverage tab: Cmd+Shift+P → \"Coverage\" → load page.\n",[36,997,998],{"class":38,"line":46},[36,999,1000],{"class":42},"#   % unused per file → purge targets. Shipping 80% unused framework CSS shows here.\n",[36,1002,1003],{"class":38,"line":52},[36,1004,1005],{"class":42},"# Rendering tab: Cmd+Shift+P → \"Rendering\" →\n",[36,1007,1008],{"class":38,"line":63},[36,1009,1010],{"class":42},"#   Paint flashing (repaint regions), Layout Shift Regions (CLS), FPS meter.\n",[36,1012,1013],{"class":38,"line":70},[36,1014,1015],{"class":42},"# Layers panel: shows compositor layers → each will-change\u002Ftransform creates one (RAM cost).\n",[18,1017,1019],{"id":1018},"a-production-stylesheet-skeleton","A Production Stylesheet Skeleton",[23,1021,1022],{"language":25},[27,1023,1025],{"className":29,"code":1024,"language":25,"meta":31,"style":31},"\u002F* ============================================================\n   app.css — single entry. Layer order is the architecture.\n   Order = precedence: later layers win at EQUAL specificity,\n   and utilities always beat components regardless of specificity.\n   ============================================================ *\u002F\n@layer reset, tokens, base, components, utilities;\n\n@layer tokens {\n  :root {\n    \u002F* Design tokens: the only place raw values live. Everything else var()s. *\u002F\n    --font-sans: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif; \u002F* native UI font, 0KB *\u002F\n    --space-1: .25rem;  --space-2: .5rem;  --space-3: 1rem;  --space-4: 2rem; \u002F* modular scale *\u002F\n    --color-bg: #fff;   --color-fg: #333;   --color-primary: #3498db;\n    --radius: 8px;\n    \u002F* OKLCH: perceptually uniform → 50% lightness looks equal across hues (HSL does NOT) *\u002F\n    --color-primary-oklch: oklch(0.62 0.18 245);\n  }\n  \u002F* Dark theme redefines the SAME tokens → every consumer updates in one paint, no cascade walk *\u002F\n  @media (prefers-color-scheme: dark) {\n    :root { --color-bg: #1a1a1a; --color-fg: #eee; --color-primary: #5dade2; }\n  }\n  [data-theme=\"dark\"] { --color-bg: #1a1a1a; --color-fg: #eee; } \u002F* manual toggle override *\u002F\n}\n\n@layer base {\n  body {\n    font-family: var(--font-sans);\n    \u002F* clamp(min, preferred, max): fluid, no media query, bounded for a11y *\u002F\n    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);\n    line-height: 1.5;            \u002F* unitless → recomputes per-element (px\u002Fem inherit as-is → overlap bug) *\u002F\n    background: var(--color-bg);\n    color: var(--color-fg);\n  }\n  \u002F* :focus-visible = keyboard only, not mouse click. outline doesn't affect layout. *\u002F\n  :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }\n}\n\n@layer utilities {\n  .u-stack > * + * { margin-block-start: var(--space-3); }  \u002F* lobotomized owl: adjacent siblings only *\u002F\n}\n",[33,1026,1027,1032,1037,1042,1047,1052,1059,1063,1070,1076,1081,1112,1167,1197,1212,1217,1241,1245,1250,1258,1292,1296,1331,1336,1341,1348,1355,1372,1378,1420,1437,1453,1469,1474,1480,1521,1526,1531,1538,1572],{"__ignoreMap":31},[36,1028,1029],{"class":38,"line":39},[36,1030,1031],{"class":42},"\u002F* ============================================================\n",[36,1033,1034],{"class":38,"line":46},[36,1035,1036],{"class":42},"   app.css — single entry. Layer order is the architecture.\n",[36,1038,1039],{"class":38,"line":52},[36,1040,1041],{"class":42},"   Order = precedence: later layers win at EQUAL specificity,\n",[36,1043,1044],{"class":38,"line":63},[36,1045,1046],{"class":42},"   and utilities always beat components regardless of specificity.\n",[36,1048,1049],{"class":38,"line":70},[36,1050,1051],{"class":42},"   ============================================================ *\u002F\n",[36,1053,1054,1056],{"class":38,"line":76},[36,1055,56],{"class":55},[36,1057,1058],{"class":59}," reset, tokens, base, components, utilities;\n",[36,1060,1061],{"class":38,"line":82},[36,1062,67],{"emptyLinePlaceholder":66},[36,1064,1065,1067],{"class":38,"line":88},[36,1066,56],{"class":55},[36,1068,1069],{"class":59}," tokens {\n",[36,1071,1072,1074],{"class":38,"line":115},[36,1073,687],{"class":101},[36,1075,112],{"class":59},[36,1077,1078],{"class":38,"line":134},[36,1079,1080],{"class":42},"    \u002F* Design tokens: the only place raw values live. Everything else var()s. *\u002F\n",[36,1082,1083,1086,1088,1091,1093,1096,1098,1101,1104,1107,1109],{"class":38,"line":151},[36,1084,1085],{"class":240},"    --font-sans",[36,1087,122],{"class":59},[36,1089,1090],{"class":118},"system-ui",[36,1092,95],{"class":59},[36,1094,1095],{"class":118},"-apple-system",[36,1097,95],{"class":59},[36,1099,1100],{"class":380},"\"Segoe UI\"",[36,1102,1103],{"class":59},", Roboto, ",[36,1105,1106],{"class":118},"sans-serif",[36,1108,445],{"class":59},[36,1110,1111],{"class":42},"\u002F* native UI font, 0KB *\u002F\n",[36,1113,1114,1117,1119,1122,1125,1128,1131,1133,1136,1138,1140,1143,1145,1148,1150,1152,1155,1157,1160,1162,1164],{"class":38,"line":164},[36,1115,1116],{"class":240},"    --space-1",[36,1118,122],{"class":59},[36,1120,1121],{"class":118},".25",[36,1123,1124],{"class":55},"rem",[36,1126,1127],{"class":59},";  ",[36,1129,1130],{"class":240},"--space-2",[36,1132,122],{"class":59},[36,1134,1135],{"class":118},".5",[36,1137,1124],{"class":55},[36,1139,1127],{"class":59},[36,1141,1142],{"class":240},"--space-3",[36,1144,122],{"class":59},[36,1146,1147],{"class":118},"1",[36,1149,1124],{"class":55},[36,1151,1127],{"class":59},[36,1153,1154],{"class":240},"--space-4",[36,1156,122],{"class":59},[36,1158,1159],{"class":118},"2",[36,1161,1124],{"class":55},[36,1163,445],{"class":59},[36,1165,1166],{"class":42},"\u002F* modular scale *\u002F\n",[36,1168,1169,1172,1174,1176,1178,1181,1183,1185,1187,1190,1192,1195],{"class":38,"line":170},[36,1170,1171],{"class":240},"    --color-bg",[36,1173,122],{"class":59},[36,1175,699],{"class":118},[36,1177,128],{"class":59},[36,1179,1180],{"class":240},"--color-fg",[36,1182,122],{"class":59},[36,1184,710],{"class":118},[36,1186,128],{"class":59},[36,1188,1189],{"class":240},"--color-primary",[36,1191,122],{"class":59},[36,1193,1194],{"class":118},"#3498db",[36,1196,161],{"class":59},[36,1198,1199,1202,1204,1207,1210],{"class":38,"line":176},[36,1200,1201],{"class":240},"    --radius",[36,1203,122],{"class":59},[36,1205,1206],{"class":118},"8",[36,1208,1209],{"class":55},"px",[36,1211,161],{"class":59},[36,1213,1214],{"class":38,"line":181},[36,1215,1216],{"class":42},"    \u002F* OKLCH: perceptually uniform → 50% lightness looks equal across hues (HSL does NOT) *\u002F\n",[36,1218,1219,1222,1224,1227,1229,1232,1235,1238],{"class":38,"line":187},[36,1220,1221],{"class":240},"    --color-primary-oklch",[36,1223,122],{"class":59},[36,1225,1226],{"class":118},"oklch",[36,1228,377],{"class":59},[36,1230,1231],{"class":118},"0.62",[36,1233,1234],{"class":118}," 0.18",[36,1236,1237],{"class":118}," 245",[36,1239,1240],{"class":59},");\n",[36,1242,1243],{"class":38,"line":193},[36,1244,167],{"class":59},[36,1246,1247],{"class":38,"line":199},[36,1248,1249],{"class":42},"  \u002F* Dark theme redefines the SAME tokens → every consumer updates in one paint, no cascade walk *\u002F\n",[36,1251,1252,1255],{"class":38,"line":222},[36,1253,1254],{"class":55},"  @media",[36,1256,1257],{"class":59}," (prefers-color-scheme: dark) {\n",[36,1259,1260,1262,1264,1267,1269,1272,1274,1276,1278,1281,1283,1285,1287,1290],{"class":38,"line":231},[36,1261,234],{"class":101},[36,1263,237],{"class":59},[36,1265,1266],{"class":240},"--color-bg",[36,1268,122],{"class":59},[36,1270,1271],{"class":118},"#1a1a1a",[36,1273,445],{"class":59},[36,1275,1180],{"class":240},[36,1277,122],{"class":59},[36,1279,1280],{"class":118},"#eee",[36,1282,445],{"class":59},[36,1284,1189],{"class":240},[36,1286,122],{"class":59},[36,1288,1289],{"class":118},"#5dade2",[36,1291,463],{"class":59},[36,1293,1294],{"class":38,"line":254},[36,1295,167],{"class":59},[36,1297,1298,1301,1304,1306,1309,1312,1314,1316,1318,1320,1322,1324,1326,1328],{"class":38,"line":259},[36,1299,1300],{"class":59},"  [",[36,1302,1303],{"class":101},"data-theme",[36,1305,645],{"class":55},[36,1307,1308],{"class":380},"\"dark\"",[36,1310,1311],{"class":59},"] { ",[36,1313,1266],{"class":240},[36,1315,122],{"class":59},[36,1317,1271],{"class":118},[36,1319,445],{"class":59},[36,1321,1180],{"class":240},[36,1323,122],{"class":59},[36,1325,1280],{"class":118},[36,1327,248],{"class":59},[36,1329,1330],{"class":42},"\u002F* manual toggle override *\u002F\n",[36,1332,1334],{"class":38,"line":1333},23,[36,1335,173],{"class":59},[36,1337,1339],{"class":38,"line":1338},24,[36,1340,67],{"emptyLinePlaceholder":66},[36,1342,1344,1346],{"class":38,"line":1343},25,[36,1345,56],{"class":55},[36,1347,228],{"class":59},[36,1349,1351,1353],{"class":38,"line":1350},26,[36,1352,717],{"class":91},[36,1354,112],{"class":59},[36,1356,1358,1361,1363,1365,1367,1370],{"class":38,"line":1357},27,[36,1359,1360],{"class":118},"    font-family",[36,1362,122],{"class":59},[36,1364,492],{"class":118},[36,1366,377],{"class":59},[36,1368,1369],{"class":240},"--font-sans",[36,1371,1240],{"class":59},[36,1373,1375],{"class":38,"line":1374},28,[36,1376,1377],{"class":42},"    \u002F* clamp(min, preferred, max): fluid, no media query, bounded for a11y *\u002F\n",[36,1379,1381,1384,1386,1389,1391,1393,1395,1397,1400,1402,1405,1408,1411,1413,1416,1418],{"class":38,"line":1380},29,[36,1382,1383],{"class":118},"    font-size",[36,1385,122],{"class":59},[36,1387,1388],{"class":118},"clamp",[36,1390,377],{"class":59},[36,1392,1147],{"class":118},[36,1394,1124],{"class":55},[36,1396,95],{"class":59},[36,1398,1399],{"class":118},"0.9",[36,1401,1124],{"class":55},[36,1403,1404],{"class":240}," +",[36,1406,1407],{"class":118}," 0.5",[36,1409,1410],{"class":55},"vw",[36,1412,95],{"class":59},[36,1414,1415],{"class":118},"1.125",[36,1417,1124],{"class":55},[36,1419,1240],{"class":59},[36,1421,1423,1426,1428,1431,1434],{"class":38,"line":1422},30,[36,1424,1425],{"class":118},"    line-height",[36,1427,122],{"class":59},[36,1429,1430],{"class":118},"1.5",[36,1432,1433],{"class":59},";            ",[36,1435,1436],{"class":42},"\u002F* unitless → recomputes per-element (px\u002Fem inherit as-is → overlap bug) *\u002F\n",[36,1438,1440,1443,1445,1447,1449,1451],{"class":38,"line":1439},31,[36,1441,1442],{"class":118},"    background",[36,1444,122],{"class":59},[36,1446,492],{"class":118},[36,1448,377],{"class":59},[36,1450,1266],{"class":240},[36,1452,1240],{"class":59},[36,1454,1456,1459,1461,1463,1465,1467],{"class":38,"line":1455},32,[36,1457,1458],{"class":118},"    color",[36,1460,122],{"class":59},[36,1462,492],{"class":118},[36,1464,377],{"class":59},[36,1466,1180],{"class":240},[36,1468,1240],{"class":59},[36,1470,1472],{"class":38,"line":1471},33,[36,1473,167],{"class":59},[36,1475,1477],{"class":38,"line":1476},34,[36,1478,1479],{"class":42},"  \u002F* :focus-visible = keyboard only, not mouse click. outline doesn't affect layout. *\u002F\n",[36,1481,1483,1486,1488,1491,1493,1495,1497,1500,1503,1505,1507,1510,1513,1515,1517,1519],{"class":38,"line":1482},35,[36,1484,1485],{"class":101},"  :focus-visible",[36,1487,237],{"class":59},[36,1489,1490],{"class":118},"outline",[36,1492,122],{"class":59},[36,1494,1159],{"class":118},[36,1496,1209],{"class":55},[36,1498,1499],{"class":118}," solid",[36,1501,1502],{"class":118}," var",[36,1504,377],{"class":59},[36,1506,1189],{"class":240},[36,1508,1509],{"class":59},"); ",[36,1511,1512],{"class":118},"outline-offset",[36,1514,122],{"class":59},[36,1516,1159],{"class":118},[36,1518,1209],{"class":55},[36,1520,463],{"class":59},[36,1522,1524],{"class":38,"line":1523},36,[36,1525,173],{"class":59},[36,1527,1529],{"class":38,"line":1528},37,[36,1530,67],{"emptyLinePlaceholder":66},[36,1532,1534,1536],{"class":38,"line":1533},38,[36,1535,56],{"class":55},[36,1537,558],{"class":59},[36,1539,1541,1544,1547,1550,1552,1554,1556,1559,1561,1563,1565,1567,1569],{"class":38,"line":1540},39,[36,1542,1543],{"class":101},"  .u-stack",[36,1545,1546],{"class":55}," >",[36,1548,1549],{"class":91}," *",[36,1551,1404],{"class":55},[36,1553,1549],{"class":91},[36,1555,237],{"class":59},[36,1557,1558],{"class":118},"margin-block-start",[36,1560,122],{"class":59},[36,1562,492],{"class":118},[36,1564,377],{"class":59},[36,1566,1142],{"class":240},[36,1568,544],{"class":59},[36,1570,1571],{"class":42},"\u002F* lobotomized owl: adjacent siblings only *\u002F\n",[36,1573,1575],{"class":38,"line":1574},40,[36,1576,173],{"class":59},[18,1578,1580],{"id":1579},"tips-tricks","💡 Tips & Tricks",[1582,1583,1584,1601,1618,1628,1642],"ul",{},[1585,1586,1587,1590,1591,1593,1594,1596,1597,1600],"li",{},[589,1588,1589],{},"Architecture",": declare ",[33,1592,56],{}," order in the ",[594,1595,596],{}," line of the entry file — that single statement is your whole specificity strategy. Utilities last → one-off overrides always win; no ",[33,1598,1599],{},"!important"," ever.",[1585,1602,1603,122,1606,1609,1610,1613,1614,1617],{},[589,1604,1605],{},"Idiom",[33,1607,1608],{},"system-ui, -apple-system, sans-serif"," gives the native OS UI font at zero download cost. Add a web font via ",[33,1611,1612],{},"@font-face"," + ",[33,1615,1616],{},"font-display: swap"," only for brand type.",[1585,1619,1620,122,1622,1625,1626,801],{},[589,1621,1605],{},[33,1623,1624],{},"clamp(min, preferred, max)"," replaces most breakpoint font\u002Fpadding rules — fluid and bounded, respects user font-size setting because the bounds are ",[33,1627,1124],{},[1585,1629,1630,1633,1634,1637,1638,1641],{},[589,1631,1632],{},"Debug",": when a rule \"isn't applying,\" read the Styles pane: if it's ",[594,1635,1636],{},"absent",", the selector didn't match; if it's ",[594,1639,1640],{},"struck through",", it lost the cascade — compare specificity columns, not gut feeling.",[1585,1643,1644,1647,1648,1651,1652,1651,1655,1658],{},[589,1645,1646],{},"Performance",": each ",[33,1649,1650],{},"will-change","\u002F",[33,1653,1654],{},"transform",[33,1656,1657],{},"filter"," promotes a compositor layer (GPU RAM). Layers panel shows the count. Layer everything → OOM on mobile.",[18,1660,1662],{"id":1661},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[1582,1664,1665,1681,1696,1712,1724,1737],{},[1585,1666,1667,122,1670,1673,1674,1676,1677,1680],{},[589,1668,1669],{},"Missing semicolon absorbs the next declaration",[33,1671,1672],{},"color: red font-size: 14px"," parses as one invalid ",[33,1675,310],{}," value → ",[594,1678,1679],{},"both"," dropped. A formatter (Prettier) makes this impossible.",[1585,1682,1683,1688,1689,1692,1693,1695],{},[589,1684,1685,1687],{},[33,1686,371],{}," after any rule is silently ignored"," and is serial + render-blocking even when it works. Use ",[33,1690,1691],{},"\u003Clink>"," or bundle. Never ",[33,1694,371],{}," in production.",[1585,1697,1698,122,1701,1704,1705,1708,1709,1711],{},[589,1699,1700],{},"Comments cannot nest",[33,1702,1703],{},"\u002F* \u002F* *\u002F *\u002F"," — the first ",[33,1706,1707],{},"*\u002F"," closes the comment; the trailing ",[33,1710,1707],{}," is a parse error.",[1585,1713,1714,122,1717,1720,1721,1723],{},[589,1715,1716],{},"Unsupported declarations are ignored, not errored",[33,1718,1719],{},"aspect-ratio: 16\u002F9"," in an old browser silently no-ops. Wrap in ",[33,1722,202],{}," for a fallback.",[1585,1725,1726,122,1729,1732,1733,1736],{},[589,1727,1728],{},"Class names are case-sensitive in HTML",[33,1730,1731],{},".Foo"," ≠ ",[33,1734,1735],{},".foo",". Selectors and properties are ASCII-case-insensitive. Be consistent (kebab-case).",[1585,1738,1739,1746,1747,1749],{},[589,1740,1741,1742,1745],{},"Inline ",[33,1743,1744],{},"style=\"\""," is specificity (1,0,0,0)",": beats every stylesheet rule except ",[33,1748,1599],{},". That's why it's reserved for JS-set custom properties, never static presentation.",[18,1751,1753],{"id":1752},"spot-the-bug","🧠 Spot the Bug",[23,1755,1756],{"language":25},[27,1757,1759],{"className":29,"code":1758,"language":25,"meta":31,"style":31},"p {\n    color: blue\n    font-size: 18px;\n}\n",[33,1760,1761,1767,1776,1788],{"__ignoreMap":31},[36,1762,1763,1765],{"class":38,"line":39},[36,1764,14],{"class":91},[36,1766,112],{"class":59},[36,1768,1769,1771,1773],{"class":38,"line":46},[36,1770,1458],{"class":118},[36,1772,122],{"class":59},[36,1774,1775],{"class":118},"blue\n",[36,1777,1778,1781,1784,1786],{"class":38,"line":52},[36,1779,1780],{"class":59},"    font-size: ",[36,1782,1783],{"class":118},"18",[36,1785,1209],{"class":55},[36,1787,161],{"class":59},[36,1789,1790],{"class":38,"line":63},[36,1791,173],{"class":59},[1793,1794,1795,1799],"details",{},[1796,1797,1798],"summary",{},"Answer",[14,1800,1801,1802,1805,1806,1809,1810,1813,1814,1816,1817,1820,1821,1823,1824,1827,1828,1830,1831,1834],{},"No semicolon after ",[33,1803,1804],{},"color: blue",". The parser reads ",[33,1807,1808],{},"color: blue font-size: 18px;"," as a single declaration whose value is ",[33,1811,1812],{},"blue font-size: 18px"," — invalid for ",[33,1815,310],{},". The whole declaration is dropped, and ",[33,1818,1819],{},"font-size"," is consumed into the invalid value, so ",[594,1822,1679],{}," properties are lost. Fix: ",[33,1825,1826],{},"color: blue;",". The final ",[33,1829,702],{}," before ",[33,1832,1833],{},"}"," is optional; every other declaration is not.",[675,1836,1837],{},"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);}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}",{"title":31,"searchDepth":46,"depth":46,"links":1839},[1840,1843,1846,1847,1848,1849,1850],{"id":20,"depth":46,"text":21,"children":1841},[1842],{"id":265,"depth":52,"text":266},{"id":616,"depth":46,"text":617,"children":1844},[1845],{"id":875,"depth":52,"text":876},{"id":954,"depth":46,"text":955},{"id":1018,"depth":46,"text":1019},{"id":1579,"depth":46,"text":1580},{"id":1661,"depth":46,"text":1662},{"id":1752,"depth":46,"text":1753},"How the browser parses, cascades, and renders CSS — box tree construction, the cascade algorithm, and a production-grade stylesheet architecture from line one. Code-first reference for mid-to-senior engineers.","md",{},"\u002Fcss\u002F01-introduction-and-setup",{"title":5,"description":1851},"css\u002F01-introduction-and-setup","gEy4puonICiN9tkZemGHIWcrcrObESKFspgTIbYdkn8",1789924644819]