[{"data":1,"prerenderedAt":1667},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks":3,"content-all-pages":1406},{"id":4,"title":5,"body":6,"description":1386,"extension":1387,"meta":1388,"navigation":503,"path":1402,"seo":1403,"stem":1404,"__hash__":1405},"content\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks\u002Findex.md","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"type":7,"value":8,"toc":1370},"minimark",[9,13,63,68,71,94,101,104,138,145,232,235,239,242,249,257,288,295,308,336,340,347,350,352,356,359,920,931,933,937,940,946,960,963,1011,1014,1036,1060,1067,1069,1073,1076,1214,1240,1242,1246,1262,1277,1279,1283,1289,1298,1316,1328,1332,1367],[10,11,5],"h1",{"id":12},"cascade-layers-vs-specificity-hacks-ordering-instead-of-escalating",[14,15,16,17,21,22,25,26,29,30,34,35,38,39,42,43,46,47,52,53,57,58,62],"p",{},"Every mature stylesheet contains an archaeological record of a fight. There is a ",[18,19,20],"code",{},".btn"," somewhere, then a ",[18,23,24],{},".card .btn"," written to beat it, then a ",[18,27,28],{},"#app .card .btn"," written to beat ",[31,32,33],"em",{},"that",", then a ",[18,36,37],{},"!important"," written by someone who had run out of patience, and finally a ",[18,40,41],{},".theme-dark #app .card .btn"," with a comment apologising for itself. Nobody chose that escalation; it was the only move available, because before ",[18,44,45],{},"@layer"," the cascade offered no way to say \"this whole group of rules outranks that whole group\" other than making individual selectors heavier. This page is about what changes once that mechanism exists, and it belongs with the rest of ",[48,49,51],"a",{"href":50},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002F","modern CSS reset strategies"," and the architecture described in ",[48,54,56],{"href":55},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",". The layer-based structuring of a reset and its design tokens is covered separately in ",[48,59,61],{"href":60},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens\u002F","cascade layers for reset and tokens","; here the subject is the conflict-resolution rule itself, and the one place it bites.",[64,65,67],"h2",{"id":66},"where-layers-sit-in-the-cascade","Where layers sit in the cascade",[14,69,70],{},"When two declarations target the same property on the same element, the browser resolves them by walking an ordered list of criteria and stopping at the first one that separates them. Simplified to what matters here, the order is:",[72,73,74,81,88,91],"ol",{},[75,76,77,78,80],"li",{},"Origin and importance — author, user, and user-agent styles, with ",[18,79,37],{}," inverting their relative order.",[75,82,83,87],{},[84,85,86],"strong",{},"Cascade layer order",", within the same origin and importance.",[75,89,90],{},"Specificity.",[75,92,93],{},"Order of appearance in the source.",[14,95,96,97,100],{},"Layers sit at step two, which is the entire point: they are consulted ",[31,98,99],{},"before"," specificity. A single-class selector in a later layer beats an ID-plus-three-classes selector in an earlier one, and it is not close, because the comparison never reaches the specificity step. This is a genuinely different kind of tool from anything that came before it, all of which operated inside step three.",[14,102,103],{},"Layer order is fixed by first declaration, not by where the rules live. That is why a stylesheet should open with an empty ordering statement:",[105,106,111],"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* One line, at the top of the entry stylesheet. Everything downstream can\n   now write @layer rules in any order and in any file. *\u002F\n@layer reset, tokens, base, components, utilities;\n","css","",[18,112,113,122,128],{"__ignoreMap":110},[114,115,118],"span",{"class":116,"line":117},"line",1,[114,119,121],{"class":120},"sLBg1","\u002F* One line, at the top of the entry stylesheet. Everything downstream can\n",[114,123,125],{"class":116,"line":124},2,[114,126,127],{"class":120},"   now write @layer rules in any order and in any file. *\u002F\n",[114,129,131,134],{"class":116,"line":130},3,[114,132,45],{"class":133},"sHUrx",[114,135,137],{"class":136},"suds8"," reset, tokens, base, components, utilities;\n",[14,139,140,141,144],{},"Later declarations of the same name append rules into the existing layer without moving its position. So a component file loaded last can still write into ",[18,142,143],{},"@layer base"," and be correctly outranked by the components layer. Order becomes an architectural decision made once, in one visible place, rather than an emergent property of bundler output.",[146,147,153,154,153,158,153,162,153,169,153,175,153,185,153,190,153,196,153,200,153,204,153,208,153,212,153,215,153,219,153,223,153,227],"svg",{"viewBox":148,"role":149,"ariaLabel":150,"xmlns":151,"style":152},"0 0 720 380","img","Diagram showing unlayered styles winning over all layers, and later layers winning over earlier ones regardless of selector specificity","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[155,156,157],"title",{},"Priority bands for normal author declarations",[159,160,161],"desc",{},"Unlayered styles form the highest band, then layers in reverse declaration order, with specificity only compared inside a single band.",[163,164,168],"text",{"x":165,"y":166,"style":167},"360","28","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","who wins, before specificity is checked",[163,170,174],{"x":171,"y":172,"style":173},"676","62","text-anchor:end;fill:currentColor;font:600 12px sans-serif;opacity:0.8","highest priority",[176,177],"rect",{"x":178,"y":179,"width":180,"height":181,"rx":182,"fill":183,"opacity":184},"150","74","420","46","8","#7aa2ff","0.32",[163,186,189],{"x":165,"y":187,"style":188},"103","text-anchor:middle;fill:currentColor;font:13px ui-monospace,monospace","unlayered styles",[176,191],{"x":178,"y":192,"width":180,"height":193,"rx":182,"fill":194,"opacity":195},"130","42","currentColor","0.16",[163,197,199],{"x":165,"y":198,"style":188},"157","@layer utilities",[176,201],{"x":178,"y":202,"width":180,"height":193,"rx":182,"fill":194,"opacity":203},"180","0.13",[163,205,207],{"x":165,"y":206,"style":188},"207","@layer components",[176,209],{"x":178,"y":210,"width":180,"height":193,"rx":182,"fill":194,"opacity":211},"230","0.10",[163,213,143],{"x":165,"y":214,"style":188},"257",[176,216],{"x":178,"y":217,"width":180,"height":193,"rx":182,"fill":194,"opacity":218},"280","0.07",[163,220,222],{"x":165,"y":221,"style":188},"307","@layer reset",[163,224,226],{"x":171,"y":225,"style":173},"316","lowest priority",[163,228,231],{"x":165,"y":229,"style":230},"356","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","Specificity is only compared between rules inside the same band.",[233,234],"hr",{},[64,236,238],{"id":237},"the-three-hacks-layers-retire","The three hacks layers retire",[14,240,241],{},"Each of the following existed to simulate an ordering rule that CSS did not have. With layers, each becomes unnecessary in its original role.",[243,244,246,248],"h3",{"id":245},"important-as-a-priority-escalator",[18,247,37],{}," as a priority escalator",[14,250,251,253,254,256],{},[18,252,37],{}," was the only pre-layer way to jump a declaration over a heavier selector. Its cost is that it exits the normal cascade entirely, so the only thing that can override it is another ",[18,255,37],{}," — which is how a stylesheet ends up with dozens of them and no way to reason about any of them.",[14,258,259,260,262,263,266,267,269,270,273,274,276,277,280,281,284,285,287],{},"Layers replace the escalation use of ",[18,261,37],{}," completely. Note the deliberate quirk in the specification: ",[84,264,265],{},"for important declarations, layer order is reversed."," An ",[18,268,37],{}," rule in your ",[18,271,272],{},"reset"," layer beats an ",[18,275,37],{}," rule in ",[18,278,279],{},"utilities",". This is not an inconsistency; it is what makes the low-priority layer the right place for a genuine non-negotiable, such as a reset rule enforcing ",[18,282,283],{},"box-sizing",". In practice this means you almost never write ",[18,286,37],{}," again, and when you do, you write it in an early layer on purpose.",[243,289,291,294],{"id":290},"where-for-zero-specificity",[18,292,293],{},":where()"," for zero specificity",[14,296,297,299,300,303,304,307],{},[18,298,293],{}," takes a selector list and contributes zero to specificity, so ",[18,301,302],{},":where(.card) .title"," is exactly as specific as ",[18,305,306],{},".title",". It was widely adopted in resets so that consumers could override reset rules with any selector at all.",[14,309,310,311,314,315,317,318,321,322,325,326,329,330,332,333,335],{},"It still has a job — but a smaller and more precise one. Layers handle priority ",[31,312,313],{},"between"," groups; ",[18,316,293],{}," flattens specificity ",[31,319,320],{},"inside"," a group. That is worth doing for its own sake, because a layer whose internal selectors range from ",[18,323,324],{},"0,1,0"," to ",[18,327,328],{},"0,4,1"," is still a layer nobody can reason about. Used together, the pattern is: layers to order the groups, ",[18,331,293],{}," to keep each group internally flat and predictable, and simple source order to resolve the rest. What ",[18,334,293],{}," should no longer be doing is standing in for a priority mechanism it was never designed to be.",[243,337,339],{"id":338},"id-selector-escalation","ID-selector escalation",[14,341,342,343,346],{},"Adding ",[18,344,345],{},"#app"," to a selector adds 1,0,0 of specificity — an amount no realistic number of classes can beat — which made it the standard sledgehammer for defeating a component library. It also makes the rule structurally dependent on a DOM ID that may not exist in every rendering context, and it drags a whole file's worth of selectors upward once one rule starts the arms race.",[14,348,349],{},"With layers, the reason to reach for it evaporates. A single-class selector in a later layer already wins. You are trading a specificity value that must be defended against future increases for an ordering statement that is stable by construction.",[233,351],{},[64,353,355],{"id":354},"a-working-example-of-ordering-beating-specificity","A working example of ordering beating specificity",[14,357,358],{},"The following page contains a deliberately extreme mismatch: a heavyweight selector in an earlier layer against the lightest possible selector in a later one.",[105,360,364],{"className":361,"code":362,"language":363,"meta":110,"style":110},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>Layer order beats specificity\u003C\u002Ftitle>\n\u003Cstyle>\n  \u002F* Declared once, up front. This single statement fixes priority for the\n     whole document, regardless of the order the rules below appear in. *\u002F\n  @layer reset, components, utilities;\n\n  @layer components {\n    \u002F* Specificity 1,3,1 — an ID, three classes, one element.\n       Under the old rules this was close to unbeatable. *\u002F\n    #app .panel.panel--alert .panel__title span {\n      color: #b42318;\n      font-weight: 800;\n    }\n  }\n\n  @layer utilities {\n    \u002F* Specificity 0,1,0. It wins anyway, because the utilities layer was\n       declared after components and layer order is checked first. *\u002F\n    .u-muted {\n      color: #6b7280;\n      font-weight: 400;\n    }\n  }\n\n  \u002F* Unlayered. This band outranks every layer above, which is why it is\n     reserved here for page chrome that nothing should override. *\u002F\n  body { margin: 0; padding: 1.5rem; font: 16px\u002F1.5 system-ui, sans-serif; }\n  .panel { border: 1px solid #d4d4d8; border-radius: 10px; padding: 1rem; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"app\">\n    \u003Csection class=\"panel panel--alert\">\n      \u003Ch2 class=\"panel__title\">Status: \u003Cspan class=\"u-muted\">degraded\u003C\u002Fspan>\u003C\u002Fh2>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[18,365,366,382,401,410,428,453,467,477,483,489,498,505,513,519,525,543,558,571,577,583,588,596,602,608,616,628,640,645,650,655,661,667,728,776,786,795,805,824,843,882,892,902,911],{"__ignoreMap":110},[114,367,368,371,375,379],{"class":116,"line":117},[114,369,370],{"class":136},"\u003C!",[114,372,374],{"class":373},"sne4z","DOCTYPE",[114,376,378],{"class":377},"s-5SL"," html",[114,380,381],{"class":136},">\n",[114,383,384,387,389,392,395,399],{"class":116,"line":124},[114,385,386],{"class":136},"\u003C",[114,388,363],{"class":373},[114,390,391],{"class":377}," lang",[114,393,394],{"class":136},"=",[114,396,398],{"class":397},"sT6z2","\"en\"",[114,400,381],{"class":136},[114,402,403,405,408],{"class":116,"line":130},[114,404,386],{"class":136},[114,406,407],{"class":373},"head",[114,409,381],{"class":136},[114,411,413,415,418,421,423,426],{"class":116,"line":412},4,[114,414,386],{"class":136},[114,416,417],{"class":373},"meta",[114,419,420],{"class":377}," charset",[114,422,394],{"class":136},[114,424,425],{"class":397},"\"utf-8\"",[114,427,381],{"class":136},[114,429,431,433,435,438,440,443,446,448,451],{"class":116,"line":430},5,[114,432,386],{"class":136},[114,434,417],{"class":373},[114,436,437],{"class":377}," name",[114,439,394],{"class":136},[114,441,442],{"class":397},"\"viewport\"",[114,444,445],{"class":377}," content",[114,447,394],{"class":136},[114,449,450],{"class":397},"\"width=device-width, initial-scale=1\"",[114,452,381],{"class":136},[114,454,456,458,460,463,465],{"class":116,"line":455},6,[114,457,386],{"class":136},[114,459,155],{"class":373},[114,461,462],{"class":136},">Layer order beats specificity\u003C\u002F",[114,464,155],{"class":373},[114,466,381],{"class":136},[114,468,470,472,475],{"class":116,"line":469},7,[114,471,386],{"class":136},[114,473,474],{"class":373},"style",[114,476,381],{"class":136},[114,478,480],{"class":116,"line":479},8,[114,481,482],{"class":120},"  \u002F* Declared once, up front. This single statement fixes priority for the\n",[114,484,486],{"class":116,"line":485},9,[114,487,488],{"class":120},"     whole document, regardless of the order the rules below appear in. *\u002F\n",[114,490,492,495],{"class":116,"line":491},10,[114,493,494],{"class":133},"  @layer",[114,496,497],{"class":136}," reset, components, utilities;\n",[114,499,501],{"class":116,"line":500},11,[114,502,504],{"emptyLinePlaceholder":503},true,"\n",[114,506,508,510],{"class":116,"line":507},12,[114,509,494],{"class":133},[114,511,512],{"class":136}," components {\n",[114,514,516],{"class":116,"line":515},13,[114,517,518],{"class":120},"    \u002F* Specificity 1,3,1 — an ID, three classes, one element.\n",[114,520,522],{"class":116,"line":521},14,[114,523,524],{"class":120},"       Under the old rules this was close to unbeatable. *\u002F\n",[114,526,528,531,534,537,540],{"class":116,"line":527},15,[114,529,530],{"class":377},"    #app",[114,532,533],{"class":377}," .panel.panel--alert",[114,535,536],{"class":377}," .panel__title",[114,538,539],{"class":373}," span",[114,541,542],{"class":136}," {\n",[114,544,546,549,552,555],{"class":116,"line":545},16,[114,547,548],{"class":377},"      color",[114,550,551],{"class":136},": ",[114,553,554],{"class":377},"#b42318",[114,556,557],{"class":136},";\n",[114,559,561,564,566,569],{"class":116,"line":560},17,[114,562,563],{"class":377},"      font-weight",[114,565,551],{"class":136},[114,567,568],{"class":377},"800",[114,570,557],{"class":136},[114,572,574],{"class":116,"line":573},18,[114,575,576],{"class":136},"    }\n",[114,578,580],{"class":116,"line":579},19,[114,581,582],{"class":136},"  }\n",[114,584,586],{"class":116,"line":585},20,[114,587,504],{"emptyLinePlaceholder":503},[114,589,591,593],{"class":116,"line":590},21,[114,592,494],{"class":133},[114,594,595],{"class":136}," utilities {\n",[114,597,599],{"class":116,"line":598},22,[114,600,601],{"class":120},"    \u002F* Specificity 0,1,0. It wins anyway, because the utilities layer was\n",[114,603,605],{"class":116,"line":604},23,[114,606,607],{"class":120},"       declared after components and layer order is checked first. *\u002F\n",[114,609,611,614],{"class":116,"line":610},24,[114,612,613],{"class":377},"    .u-muted",[114,615,542],{"class":136},[114,617,619,621,623,626],{"class":116,"line":618},25,[114,620,548],{"class":377},[114,622,551],{"class":136},[114,624,625],{"class":377},"#6b7280",[114,627,557],{"class":136},[114,629,631,633,635,638],{"class":116,"line":630},26,[114,632,563],{"class":377},[114,634,551],{"class":136},[114,636,637],{"class":377},"400",[114,639,557],{"class":136},[114,641,643],{"class":116,"line":642},27,[114,644,576],{"class":136},[114,646,648],{"class":116,"line":647},28,[114,649,582],{"class":136},[114,651,653],{"class":116,"line":652},29,[114,654,504],{"emptyLinePlaceholder":503},[114,656,658],{"class":116,"line":657},30,[114,659,660],{"class":120},"  \u002F* Unlayered. This band outranks every layer above, which is why it is\n",[114,662,664],{"class":116,"line":663},31,[114,665,666],{"class":120},"     reserved here for page chrome that nothing should override. *\u002F\n",[114,668,670,673,676,679,681,684,687,690,692,695,698,700,703,705,708,711,714,716,719,722,725],{"class":116,"line":669},32,[114,671,672],{"class":373},"  body",[114,674,675],{"class":136}," { ",[114,677,678],{"class":377},"margin",[114,680,551],{"class":136},[114,682,683],{"class":377},"0",[114,685,686],{"class":136},"; ",[114,688,689],{"class":377},"padding",[114,691,551],{"class":136},[114,693,694],{"class":377},"1.5",[114,696,697],{"class":133},"rem",[114,699,686],{"class":136},[114,701,702],{"class":377},"font",[114,704,551],{"class":136},[114,706,707],{"class":377},"16",[114,709,710],{"class":133},"px",[114,712,713],{"class":136},"\u002F",[114,715,694],{"class":377},[114,717,718],{"class":377}," system-ui",[114,720,721],{"class":136},", ",[114,723,724],{"class":377},"sans-serif",[114,726,727],{"class":136},"; }\n",[114,729,731,734,736,739,741,744,746,749,752,754,757,759,762,764,766,768,770,772,774],{"class":116,"line":730},33,[114,732,733],{"class":377},"  .panel",[114,735,675],{"class":136},[114,737,738],{"class":377},"border",[114,740,551],{"class":136},[114,742,743],{"class":377},"1",[114,745,710],{"class":133},[114,747,748],{"class":377}," solid",[114,750,751],{"class":377}," #d4d4d8",[114,753,686],{"class":136},[114,755,756],{"class":377},"border-radius",[114,758,551],{"class":136},[114,760,761],{"class":377},"10",[114,763,710],{"class":133},[114,765,686],{"class":136},[114,767,689],{"class":377},[114,769,551],{"class":136},[114,771,743],{"class":377},[114,773,697],{"class":133},[114,775,727],{"class":136},[114,777,779,782,784],{"class":116,"line":778},34,[114,780,781],{"class":136},"\u003C\u002F",[114,783,474],{"class":373},[114,785,381],{"class":136},[114,787,789,791,793],{"class":116,"line":788},35,[114,790,781],{"class":136},[114,792,407],{"class":373},[114,794,381],{"class":136},[114,796,798,800,803],{"class":116,"line":797},36,[114,799,386],{"class":136},[114,801,802],{"class":373},"body",[114,804,381],{"class":136},[114,806,808,811,814,817,819,822],{"class":116,"line":807},37,[114,809,810],{"class":136},"  \u003C",[114,812,813],{"class":373},"div",[114,815,816],{"class":377}," id",[114,818,394],{"class":136},[114,820,821],{"class":397},"\"app\"",[114,823,381],{"class":136},[114,825,827,830,833,836,838,841],{"class":116,"line":826},38,[114,828,829],{"class":136},"    \u003C",[114,831,832],{"class":373},"section",[114,834,835],{"class":377}," class",[114,837,394],{"class":136},[114,839,840],{"class":397},"\"panel panel--alert\"",[114,842,381],{"class":136},[114,844,846,849,851,853,855,858,861,863,865,867,870,873,875,878,880],{"class":116,"line":845},39,[114,847,848],{"class":136},"      \u003C",[114,850,64],{"class":373},[114,852,835],{"class":377},[114,854,394],{"class":136},[114,856,857],{"class":397},"\"panel__title\"",[114,859,860],{"class":136},">Status: \u003C",[114,862,114],{"class":373},[114,864,835],{"class":377},[114,866,394],{"class":136},[114,868,869],{"class":397},"\"u-muted\"",[114,871,872],{"class":136},">degraded\u003C\u002F",[114,874,114],{"class":373},[114,876,877],{"class":136},">\u003C\u002F",[114,879,64],{"class":373},[114,881,381],{"class":136},[114,883,885,888,890],{"class":116,"line":884},40,[114,886,887],{"class":136},"    \u003C\u002F",[114,889,832],{"class":373},[114,891,381],{"class":136},[114,893,895,898,900],{"class":116,"line":894},41,[114,896,897],{"class":136},"  \u003C\u002F",[114,899,813],{"class":373},[114,901,381],{"class":136},[114,903,905,907,909],{"class":116,"line":904},42,[114,906,781],{"class":136},[114,908,802],{"class":373},[114,910,381],{"class":136},[114,912,914,916,918],{"class":116,"line":913},43,[114,915,781],{"class":136},[114,917,363],{"class":373},[114,919,381],{"class":136},[14,921,922,923,926,927,930],{},"The word \"degraded\" renders grey and at normal weight. Delete the ",[18,924,925],{},"@layer utilities { }"," wrapper and it turns red and heavy again — because the ",[18,928,929],{},".u-muted"," rule falls back into the unlayered band, where it is compared on specificity and loses badly to a 1,3,1 selector. That single change is the whole lesson: the outcome flipped without one character of either selector changing.",[233,932],{},[64,934,936],{"id":935},"where-unlayered-styles-bite-third-party-css","Where unlayered styles bite: third-party CSS",[14,938,939],{},"Here is the rule that surprises people, and the one that turns integrating a vendor stylesheet into a bad afternoon.",[14,941,942,945],{},[84,943,944],{},"Unlayered normal declarations form their own band, and that band has higher priority than every layer."," Not \"the last layer\" — higher than all of them. The reasoning is sound: layers were added to an ecosystem full of existing unlayered stylesheets, and it would have been unacceptable for adopting a layer to silently demote your entire existing codebase. So unlayered styles keep their place at the top, and layers are carved out below.",[14,947,948,949,952,953,956,957,959],{},"The consequence is direct. You carefully layer your design system, then add a date picker's stylesheet with a plain ",[18,950,951],{},"\u003Clink>"," tag, and every one of its rules now outranks every one of yours. Your ",[18,954,955],{},".datepicker__day"," override in ",[18,958,207],{}," does not lose on specificity; it loses on the layer question, and it will keep losing however many classes you add.",[14,961,962],{},"The fix is to put the vendor stylesheet into a layer:",[105,964,966],{"className":107,"code":965,"language":109,"meta":110,"style":110},"\u002F* @import can assign a layer directly. It must appear before any rule other\n   than @charset and @layer statements. *\u002F\n@import url(\"vendor\u002Fdatepicker.css\") layer(vendor);\n\n\u002F* Order it explicitly against your own layers. *\u002F\n@layer reset, vendor, components, utilities;\n",[18,967,968,973,978,995,999,1004],{"__ignoreMap":110},[114,969,970],{"class":116,"line":117},[114,971,972],{"class":120},"\u002F* @import can assign a layer directly. It must appear before any rule other\n",[114,974,975],{"class":116,"line":124},[114,976,977],{"class":120},"   than @charset and @layer statements. *\u002F\n",[114,979,980,983,986,989,992],{"class":116,"line":130},[114,981,982],{"class":133},"@import",[114,984,985],{"class":377}," url",[114,987,988],{"class":136},"(",[114,990,991],{"class":397},"\"vendor\u002Fdatepicker.css\"",[114,993,994],{"class":136},") layer(vendor);\n",[114,996,997],{"class":116,"line":412},[114,998,504],{"emptyLinePlaceholder":503},[114,1000,1001],{"class":116,"line":430},[114,1002,1003],{"class":120},"\u002F* Order it explicitly against your own layers. *\u002F\n",[114,1005,1006,1008],{"class":116,"line":455},[114,1007,45],{"class":133},[114,1009,1010],{"class":136}," reset, vendor, components, utilities;\n",[14,1012,1013],{},"If the stylesheet is bundled rather than imported at runtime, wrap it at build time instead:",[105,1015,1017],{"className":107,"code":1016,"language":109,"meta":110,"style":110},"@layer vendor {\n  \u002F* Contents of vendor\u002Fdatepicker.css inlined here by the bundler. *\u002F\n}\n",[18,1018,1019,1026,1031],{"__ignoreMap":110},[114,1020,1021,1023],{"class":116,"line":117},[114,1022,45],{"class":133},[114,1024,1025],{"class":136}," vendor {\n",[114,1027,1028],{"class":116,"line":124},[114,1029,1030],{"class":120},"  \u002F* Contents of vendor\u002Fdatepicker.css inlined here by the bundler. *\u002F\n",[114,1032,1033],{"class":116,"line":130},[114,1034,1035],{"class":136},"}\n",[14,1037,1038,1039,1042,1043,1045,1046,1048,1049,1052,1053,1055,1056,1059],{},"Three practical notes on this. A plain ",[18,1040,1041],{},"\u003Clink rel=\"stylesheet\">"," cannot be assigned a layer, so it must reach you through ",[18,1044,982],{}," or your build pipeline. Vendor ",[18,1047,37],{}," declarations still escape — layering the vendor early ",[31,1050,1051],{},"raises"," the priority of its important rules under the reversed important ordering, so a stylesheet full of ",[18,1054,37],{}," needs its own handling rather than just a layer. And an anonymous ",[18,1057,1058],{},"@layer { }"," block with no name creates a unique layer you can never add to or name in an ordering statement; for vendor code, always name it.",[14,1061,1062,1063,1066],{},"A useful default once you internalise this: ",[84,1064,1065],{},"layer everything, including your own styles, so that \"unlayered\" means something."," If nothing in the codebase is unlayered by accident, then anything you do find unlayered is either a deliberate escape hatch or an unlayered import you have just discovered.",[233,1068],{},[64,1070,1072],{"id":1071},"variation-layering-inside-a-component-library-you-ship","Variation: layering inside a component library you ship",[14,1074,1075],{},"If you publish CSS for other people to consume, sublayers let you offer override points without dictating the consumer's top-level order. Layer names nest with a dot, and a sublayer's position is fixed relative to its siblings inside the parent:",[105,1077,1079],{"className":107,"code":1078,"language":109,"meta":110,"style":110},"\u002F* Inside your published stylesheet. *\u002F\n@layer lib {\n  @layer base, theme, overrides;\n\n  @layer base {\n    .lib-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid; }\n  }\n\n  @layer theme {\n    .lib-btn { background: #3b6df5; color: #fff; border-color: #3b6df5; }\n  }\n}\n",[18,1080,1081,1086,1093,1100,1104,1111,1156,1160,1164,1171,1206,1210],{"__ignoreMap":110},[114,1082,1083],{"class":116,"line":117},[114,1084,1085],{"class":120},"\u002F* Inside your published stylesheet. *\u002F\n",[114,1087,1088,1090],{"class":116,"line":124},[114,1089,45],{"class":133},[114,1091,1092],{"class":136}," lib {\n",[114,1094,1095,1097],{"class":116,"line":130},[114,1096,494],{"class":133},[114,1098,1099],{"class":136}," base, theme, overrides;\n",[114,1101,1102],{"class":116,"line":412},[114,1103,504],{"emptyLinePlaceholder":503},[114,1105,1106,1108],{"class":116,"line":430},[114,1107,494],{"class":133},[114,1109,1110],{"class":136}," base {\n",[114,1112,1113,1116,1118,1120,1122,1125,1127,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154],{"class":116,"line":455},[114,1114,1115],{"class":377},"    .lib-btn",[114,1117,675],{"class":136},[114,1119,689],{"class":377},[114,1121,551],{"class":136},[114,1123,1124],{"class":377},"0.5",[114,1126,697],{"class":133},[114,1128,1129],{"class":377}," 1",[114,1131,697],{"class":133},[114,1133,686],{"class":136},[114,1135,756],{"class":377},[114,1137,551],{"class":136},[114,1139,182],{"class":377},[114,1141,710],{"class":133},[114,1143,686],{"class":136},[114,1145,738],{"class":377},[114,1147,551],{"class":136},[114,1149,743],{"class":377},[114,1151,710],{"class":133},[114,1153,748],{"class":377},[114,1155,727],{"class":136},[114,1157,1158],{"class":116,"line":469},[114,1159,582],{"class":136},[114,1161,1162],{"class":116,"line":479},[114,1163,504],{"emptyLinePlaceholder":503},[114,1165,1166,1168],{"class":116,"line":485},[114,1167,494],{"class":133},[114,1169,1170],{"class":136}," theme {\n",[114,1172,1173,1175,1177,1180,1182,1185,1187,1190,1192,1195,1197,1200,1202,1204],{"class":116,"line":491},[114,1174,1115],{"class":377},[114,1176,675],{"class":136},[114,1178,1179],{"class":377},"background",[114,1181,551],{"class":136},[114,1183,1184],{"class":377},"#3b6df5",[114,1186,686],{"class":136},[114,1188,1189],{"class":377},"color",[114,1191,551],{"class":136},[114,1193,1194],{"class":377},"#fff",[114,1196,686],{"class":136},[114,1198,1199],{"class":377},"border-color",[114,1201,551],{"class":136},[114,1203,1184],{"class":377},[114,1205,727],{"class":136},[114,1207,1208],{"class":116,"line":500},[114,1209,582],{"class":136},[114,1211,1212],{"class":116,"line":507},[114,1213,1035],{"class":136},[14,1215,1216,1217,1220,1221,1223,1224,1227,1228,1230,1231,1234,1235,1239],{},"A consumer writes ",[18,1218,1219],{},"@layer lib.overrides { .lib-btn { border-radius: 0; } }"," and wins over your theme without touching specificity, without ",[18,1222,37],{},", and without you having to guess where ",[18,1225,1226],{},"lib"," sits in their stack. The whole ",[18,1229,1226],{}," layer still moves as one unit wherever they place it in their own ordering statement. This composes cleanly with scoped ",[18,1232,1233],{},"@container"," styling, so a component can vary by both its layer and its measured width — see ",[48,1236,1238],{"href":1237},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production\u002F","how to use container queries in production"," for that side of the architecture.",[233,1241],{},[64,1243,1245],{"id":1244},"browser-support","Browser support",[14,1247,1248,1249,1251,1252,1255,1256,1251,1258,1261],{},"Cascade layers are broadly available: ",[18,1250,45],{}," and ",[18,1253,1254],{},"@import ... layer()"," shipped in Chrome 99, Edge 99, Firefox 97 and Safari 15.4, all in the first half of 2022. ",[18,1257,293],{},[18,1259,1260],{},":is()"," arrived earlier still in every engine, so layers are the effective support floor for the techniques on this page.",[14,1263,1264,1265,1267,1268,1271,1272,1276],{},"There is no graceful partial degradation, and this is worth stating plainly: an engine that does not understand ",[18,1266,45],{}," treats the whole at-rule as invalid and drops every rule inside it. That is a catastrophic failure rather than a cosmetic one, so ",[18,1269,1270],{},"@supports at-rule(@layer)"," is not a useful guard — the fallback would have to be a complete second stylesheet. Given the support baseline, the realistic position in 2026 is to use layers unconditionally. The reasoning behind that kind of all-or-nothing call is set out in ",[48,1273,1275],{"href":1274},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports\u002F","feature detection with @supports",".",[233,1278],{},[64,1280,1282],{"id":1281},"faq","FAQ",[14,1284,1285,1288],{},[84,1286,1287],{},"Does a layered ID selector beat an unlayered class selector?","\nNo. Unlayered normal declarations sit in a higher-priority band than every layer, so the unlayered class wins outright no matter how specific the layered selector is. Specificity is only compared after the layer question is settled.",[14,1290,1291,1297],{},[84,1292,1293,1294,1296],{},"What happens to ",[18,1295,37],{}," inside a cascade layer?","\nImportant declarations reverse the layer order. The first layer declared wins for important declarations, which is the opposite of normal declarations, so an important rule in your reset layer beats an important rule in your components layer.",[14,1299,1300,1303,1304,1307,1308,1311,1312,1315],{},[84,1301,1302],{},"How do I bring a third-party stylesheet into a layer?","\nUse ",[18,1305,1306],{},"@import url(vendor.css) layer(vendor)",", or wrap a bundled copy in ",[18,1309,1310],{},"@layer vendor { }",". A plain ",[18,1313,1314],{},"link"," element cannot be layered, so the stylesheet has to reach you through an import or your build.",[14,1317,1318,1324,1325,1327],{},[84,1319,1320,1321,1323],{},"Is ",[18,1322,293],{}," still useful once I have cascade layers?","\nYes, but for a different job. Layers handle inter-group priority; ",[18,1326,293],{}," keeps specificity flat inside a group so rules within one layer stay easy to override in source order. Use both rather than choosing.",[64,1329,1331],{"id":1330},"related","Related",[1333,1334,1335,1341,1347,1353,1360],"ul",{},[75,1336,1337,1340],{},[48,1338,1339],{"href":60},"Cascade Layers for Reset and Tokens"," — the layer stack a reset and its design tokens should occupy.",[75,1342,1343,1346],{},[48,1344,1345],{"href":50},"Modern CSS Reset Strategies"," — the parent guide for baseline stylesheet architecture.",[75,1348,1349,1352],{},[48,1350,1351],{"href":1274},"Feature Detection with @supports"," — when a guard is worth writing and when it is not.",[75,1354,1355,1359],{},[48,1356,1358],{"href":1357},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety\u002F","Registered Properties and Type Safety"," — the other half of a predictable token layer.",[75,1361,1362,1366],{},[48,1363,1365],{"href":1364},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations\u002F","Fluid Spacing Tokens Driving Transition Durations"," — tokens that cross from layout into motion.",[474,1368,1369],{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}",{"title":110,"searchDepth":124,"depth":124,"links":1371},[1372,1373,1380,1381,1382,1383,1384,1385],{"id":66,"depth":124,"text":67},{"id":237,"depth":124,"text":238,"children":1374},[1375,1377,1379],{"id":245,"depth":130,"text":1376},"!important as a priority escalator",{"id":290,"depth":130,"text":1378},":where() for zero specificity",{"id":338,"depth":130,"text":339},{"id":354,"depth":124,"text":355},{"id":935,"depth":124,"text":936},{"id":1071,"depth":124,"text":1072},{"id":1244,"depth":124,"text":1245},{"id":1281,"depth":124,"text":1282},{"id":1330,"depth":124,"text":1331},"@layer decides winners before specificity is consulted, retiring !important chains, :where() tricks and ID escalation — except where unlayered vendor CSS wins.","md",{"pageTitle":1389,"datePublished":1390,"dateModified":1390,"faq":1391},"Cascade Layers vs Specificity Hacks","2026-07-20",[1392,1394,1397,1399],{"q":1287,"a":1393},"No. Unlayered normal declarations sit in a higher-priority band than every layer, so the unlayered class wins outright no matter how specific the layered selector is. Specificity is only compared after the layer question is settled.",{"q":1395,"a":1396},"What happens to !important inside a cascade layer?","Important declarations reverse the layer order. The first layer declared wins for important declarations, which is the opposite of normal declarations, so an important rule in your reset layer beats an important rule in your components layer.",{"q":1302,"a":1398},"Use @import url(vendor.css) layer(vendor), or wrap a bundled copy in @layer vendor { }. A plain link element cannot be layered, so the stylesheet has to reach you through an import or your build.",{"q":1400,"a":1401},"Is :where() still useful once I have cascade layers?","Yes, but for a different job. Layers handle inter-group priority; :where() keeps specificity flat inside a group so rules within one layer stay easy to override in source order. Use both rather than choosing.","\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks",{"title":5,"description":1386},"mastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks\u002Findex","E7banaph0v-bjDlTC5wUmHLXx_h4k5GEDlR9WBd4igc",[1407,1410,1413,1416,1419,1422,1425,1428,1431,1434,1437,1440,1443,1446,1449,1452,1455,1458,1461,1464,1467,1470,1473,1476,1479,1482,1485,1488,1491,1494,1497,1500,1503,1506,1509,1512,1515,1518,1521,1524,1527,1530,1533,1536,1539,1542,1545,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1618,1621,1624,1627,1630,1633,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664],{"path":1408,"title":1409},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":1411,"title":1412},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1414,"title":1415},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1417,"title":1418},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":1420,"title":1421},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":1423,"title":1424},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1426,"title":1427},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1429,"title":1430},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1432,"title":1433},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1435,"title":1436},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":1438,"title":1439},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1441,"title":1442},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1444,"title":1445},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":1447,"title":1448},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":1450,"title":1451},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1453,"title":1454},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1456,"title":1457},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":1459,"title":1460},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1462,"title":1463},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1465,"title":1466},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1468,"title":1469},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1471,"title":1472},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1474,"title":1475},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":1477,"title":1478},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1480,"title":1481},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1483,"title":1484},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":1486,"title":1487},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":1489,"title":1490},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1492,"title":1493},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1495,"title":1496},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1498,"title":1499},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":1501,"title":1502},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":1504,"title":1505},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1507,"title":1508},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1510,"title":1511},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1513,"title":1514},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1516,"title":1517},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":1519,"title":1520},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":1522,"title":1523},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1525,"title":1526},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1528,"title":1529},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1531,"title":1532},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1534,"title":1535},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1537,"title":1538},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":1540,"title":1541},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":1543,"title":1544},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":713,"title":1546},"Modern CSS Layouts & Micro-Interactions",{"path":1548,"title":1549},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1551,"title":1552},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1554,"title":1555},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1557,"title":1558},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1560,"title":1561},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1563,"title":1564},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1566,"title":1567},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1569,"title":1570},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":1572,"title":1573},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1575,"title":1576},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1578,"title":1579},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":1581,"title":1582},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1584,"title":1585},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1587,"title":1588},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1590,"title":1591},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":1593,"title":1594},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":1596,"title":1597},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1599,"title":1600},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1602,"title":1603},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":1605,"title":1606},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":1608,"title":1609},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1611,"title":1612},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1614,"title":1615},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1617,"title":56},"\u002Fmastering-container-queries-responsive-layouts",{"path":1619,"title":1620},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1622,"title":1623},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1625,"title":1626},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1628,"title":1629},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1631,"title":1632},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1402,"title":5},{"path":1635,"title":1636},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1638,"title":1639},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":1641,"title":1642},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1644,"title":1645},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1647,"title":1648},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1650,"title":1651},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1653,"title":1654},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1656,"title":1657},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":1659,"title":1660},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1662,"title":1663},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":1665,"title":1666},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",1784566157670]