[{"data":1,"prerenderedAt":1109},["ShallowReactive",2],{"page-\u002Fcss\u002F18-architecture-and-methodology":3},{"id":4,"title":5,"body":6,"description":1102,"extension":1103,"meta":1104,"navigation":671,"path":1105,"seo":1106,"stem":1107,"__hash__":1108},"content\u002Fcss\u002F18-architecture-and-methodology.md","18 — Architecture: BEM, OOCSS, ITCSS, Atomic & Cascade Layers",{"type":7,"value":8,"toc":1089},"minimark",[9,13,22,27,153,249,253,284,366,397,401,533,593,597,607,613,617,644,647,653,837,841,916,920,1009,1013,1038,1085],[10,11,5],"h1",{"id":12},"_18-architecture-bem-oocss-itcss-atomic-cascade-layers",[14,15,16,17,21],"p",{},"Without architecture, CSS rots: specificity wars, dead code, inconsistent naming. Methodologies bring order through naming conventions and organizational rules. The modern approach: BEM for flat specificity + ",[18,19,20],"code",{},"@layer"," for explicit precedence. This is the architecture that scales.",[23,24,26],"h2",{"id":25},"bem-block-element-modifier","BEM — Block, Element, Modifier",[28,29,31],"code-wrapper",{"language":30},"html",[32,33,37],"pre",{"className":34,"code":35,"language":30,"meta":36,"style":36},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Block: standalone component. Element: part of the block (__). Modifier: variation (--). -->\n\u003Cdiv class=\"card card--featured\">\n  \u003Cimg class=\"card__image\" src=\"...\">\n  \u003Ch3 class=\"card__title\">Title\u003C\u002Fh3>\n  \u003Cbutton class=\"card__button card__button--disabled\">Click\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","",[18,38,39,48,73,99,121,143],{"__ignoreMap":36},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sdCPZ","\u003C!-- Block: standalone component. Element: part of the block (__). Modifier: variation (--). -->\n",[40,49,51,55,59,63,66,70],{"class":42,"line":50},2,[40,52,54],{"class":53},"ssxIu","\u003C",[40,56,58],{"class":57},"sk71V","div",[40,60,62],{"class":61},"sIsaT"," class",[40,64,65],{"class":53},"=",[40,67,69],{"class":68},"sJ6F3","\"card card--featured\"",[40,71,72],{"class":53},">\n",[40,74,76,79,82,84,86,89,92,94,97],{"class":42,"line":75},3,[40,77,78],{"class":53},"  \u003C",[40,80,81],{"class":57},"img",[40,83,62],{"class":61},[40,85,65],{"class":53},[40,87,88],{"class":68},"\"card__image\"",[40,90,91],{"class":61}," src",[40,93,65],{"class":53},[40,95,96],{"class":68},"\"...\"",[40,98,72],{"class":53},[40,100,102,104,107,109,111,114,117,119],{"class":42,"line":101},4,[40,103,78],{"class":53},[40,105,106],{"class":57},"h3",[40,108,62],{"class":61},[40,110,65],{"class":53},[40,112,113],{"class":68},"\"card__title\"",[40,115,116],{"class":53},">Title\u003C\u002F",[40,118,106],{"class":57},[40,120,72],{"class":53},[40,122,124,126,129,131,133,136,139,141],{"class":42,"line":123},5,[40,125,78],{"class":53},[40,127,128],{"class":57},"button",[40,130,62],{"class":61},[40,132,65],{"class":53},[40,134,135],{"class":68},"\"card__button card__button--disabled\"",[40,137,138],{"class":53},">Click\u003C\u002F",[40,140,128],{"class":57},[40,142,72],{"class":53},[40,144,146,149,151],{"class":42,"line":145},6,[40,147,148],{"class":53},"\u003C\u002F",[40,150,58],{"class":57},[40,152,72],{"class":53},[28,154,156],{"language":155},"css",[32,157,160],{"className":158,"code":159,"language":155,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark",".card { \u002F* ... *\u002F }                    \u002F* (0,0,1,0) — block *\u002F\n.card--featured { \u002F* ... *\u002F }          \u002F* (0,0,1,0) — modifier (used WITH the block) *\u002F\n.card__image { \u002F* ... *\u002F }            \u002F* (0,0,1,0) — element *\u002F\n.card__button { \u002F* ... *\u002F }           \u002F* (0,0,1,0) — element *\u002F\n.card__button--disabled { \u002F* ... *\u002F } \u002F* (0,0,1,0) — element modifier *\u002F\n\u002F* Every selector is a SINGLE class → flat specificity (0,0,1,0). No specificity wars.\n   No nesting: .card .card__title is WRONG (creates (0,0,2,0)). Use .card__title alone. *\u002F\n",[18,161,162,179,194,209,223,238,243],{"__ignoreMap":36},[40,163,164,167,170,173,176],{"class":42,"line":43},[40,165,166],{"class":61},".card",[40,168,169],{"class":53}," { ",[40,171,172],{"class":46},"\u002F* ... *\u002F",[40,174,175],{"class":53}," }                    ",[40,177,178],{"class":46},"\u002F* (0,0,1,0) — block *\u002F\n",[40,180,181,184,186,188,191],{"class":42,"line":50},[40,182,183],{"class":61},".card--featured",[40,185,169],{"class":53},[40,187,172],{"class":46},[40,189,190],{"class":53}," }          ",[40,192,193],{"class":46},"\u002F* (0,0,1,0) — modifier (used WITH the block) *\u002F\n",[40,195,196,199,201,203,206],{"class":42,"line":75},[40,197,198],{"class":61},".card__image",[40,200,169],{"class":53},[40,202,172],{"class":46},[40,204,205],{"class":53}," }            ",[40,207,208],{"class":46},"\u002F* (0,0,1,0) — element *\u002F\n",[40,210,211,214,216,218,221],{"class":42,"line":101},[40,212,213],{"class":61},".card__button",[40,215,169],{"class":53},[40,217,172],{"class":46},[40,219,220],{"class":53}," }           ",[40,222,208],{"class":46},[40,224,225,228,230,232,235],{"class":42,"line":123},[40,226,227],{"class":61},".card__button--disabled",[40,229,169],{"class":53},[40,231,172],{"class":46},[40,233,234],{"class":53}," } ",[40,236,237],{"class":46},"\u002F* (0,0,1,0) — element modifier *\u002F\n",[40,239,240],{"class":42,"line":145},[40,241,242],{"class":46},"\u002F* Every selector is a SINGLE class → flat specificity (0,0,1,0). No specificity wars.\n",[40,244,246],{"class":42,"line":245},7,[40,247,248],{"class":46},"   No nesting: .card .card__title is WRONG (creates (0,0,2,0)). Use .card__title alone. *\u002F\n",[106,250,252],{"id":251},"anti-pattern-modifier-without-the-base","Anti-pattern: modifier without the base",[28,254,255],{"language":30},[32,256,258],{"className":34,"code":257,"language":30,"meta":36,"style":36},"\u003C!-- ❌ Only btn--disabled — missing the base btn. Modifier only sets DIFFERENCES. -->\n\u003Cbutton class=\"btn--disabled\">Click\u003C\u002Fbutton>\n",[18,259,260,265],{"__ignoreMap":36},[40,261,262],{"class":42,"line":43},[40,263,264],{"class":46},"\u003C!-- ❌ Only btn--disabled — missing the base btn. Modifier only sets DIFFERENCES. -->\n",[40,266,267,269,271,273,275,278,280,282],{"class":42,"line":50},[40,268,54],{"class":53},[40,270,128],{"class":57},[40,272,62],{"class":61},[40,274,65],{"class":53},[40,276,277],{"class":68},"\"btn--disabled\"",[40,279,138],{"class":53},[40,281,128],{"class":57},[40,283,72],{"class":53},[28,285,286],{"language":155},[32,287,289],{"className":158,"code":288,"language":155,"meta":36,"style":36},"\u002F* The modifier only overrides; it doesn't carry base styles. Button is unstyled (no padding, no color). *\u002F\n.btn { padding: 0.5rem 1rem; background: blue; color: white; }\n.btn--disabled { background: gray; }  \u002F* only the difference *\u002F\n",[18,290,291,296,346],{"__ignoreMap":36},[40,292,293],{"class":42,"line":43},[40,294,295],{"class":46},"\u002F* The modifier only overrides; it doesn't carry base styles. Button is unstyled (no padding, no color). *\u002F\n",[40,297,298,301,303,307,310,313,317,320,322,325,328,330,333,335,338,340,343],{"class":42,"line":50},[40,299,300],{"class":61},".btn",[40,302,169],{"class":53},[40,304,306],{"class":305},"snvgF","padding",[40,308,309],{"class":53},": ",[40,311,312],{"class":305},"0.5",[40,314,316],{"class":315},"svdQ7","rem",[40,318,319],{"class":305}," 1",[40,321,316],{"class":315},[40,323,324],{"class":53},"; ",[40,326,327],{"class":305},"background",[40,329,309],{"class":53},[40,331,332],{"class":305},"blue",[40,334,324],{"class":53},[40,336,337],{"class":305},"color",[40,339,309],{"class":53},[40,341,342],{"class":305},"white",[40,344,345],{"class":53},"; }\n",[40,347,348,351,353,355,357,360,363],{"class":42,"line":75},[40,349,350],{"class":61},".btn--disabled",[40,352,169],{"class":53},[40,354,327],{"class":305},[40,356,309],{"class":53},[40,358,359],{"class":305},"gray",[40,361,362],{"class":53},"; }  ",[40,364,365],{"class":46},"\u002F* only the difference *\u002F\n",[28,367,368],{"language":30},[32,369,371],{"className":34,"code":370,"language":30,"meta":36,"style":36},"\u003C!-- ✓ Both classes: base provides the foundation, modifier overrides. -->\n\u003Cbutton class=\"btn btn--disabled\">Click\u003C\u002Fbutton>\n",[18,372,373,378],{"__ignoreMap":36},[40,374,375],{"class":42,"line":43},[40,376,377],{"class":46},"\u003C!-- ✓ Both classes: base provides the foundation, modifier overrides. -->\n",[40,379,380,382,384,386,388,391,393,395],{"class":42,"line":50},[40,381,54],{"class":53},[40,383,128],{"class":57},[40,385,62],{"class":61},[40,387,65],{"class":53},[40,389,390],{"class":68},"\"btn btn--disabled\"",[40,392,138],{"class":53},[40,394,128],{"class":57},[40,396,72],{"class":53},[23,398,400],{"id":399},"oocss-separate-structure-from-skin","OOCSS — separate structure from skin",[28,402,403],{"language":155},[32,404,406],{"className":158,"code":405,"language":155,"meta":36,"style":36},"\u002F* Structure (layout) and skin (visual) are separate classes → compose, don't couple. *\u002F\n.media { display: flex; }              \u002F* structure *\u002F\n.media__img { margin-inline-end: 1rem; }\n.media__body { flex: 1; }\n.skin-card { background: white; border-radius: 8px; box-shadow: ...; }  \u002F* skin *\u002F\n.skin-dark { background: #333; color: #eee; }                            \u002F* skin *\u002F\n",[18,407,408,413,434,453,468,505],{"__ignoreMap":36},[40,409,410],{"class":42,"line":43},[40,411,412],{"class":46},"\u002F* Structure (layout) and skin (visual) are separate classes → compose, don't couple. *\u002F\n",[40,414,415,418,420,423,425,428,431],{"class":42,"line":50},[40,416,417],{"class":61},".media",[40,419,169],{"class":53},[40,421,422],{"class":305},"display",[40,424,309],{"class":53},[40,426,427],{"class":305},"flex",[40,429,430],{"class":53},"; }              ",[40,432,433],{"class":46},"\u002F* structure *\u002F\n",[40,435,436,439,441,444,446,449,451],{"class":42,"line":75},[40,437,438],{"class":61},".media__img",[40,440,169],{"class":53},[40,442,443],{"class":305},"margin-inline-end",[40,445,309],{"class":53},[40,447,448],{"class":305},"1",[40,450,316],{"class":315},[40,452,345],{"class":53},[40,454,455,458,460,462,464,466],{"class":42,"line":101},[40,456,457],{"class":61},".media__body",[40,459,169],{"class":53},[40,461,427],{"class":305},[40,463,309],{"class":53},[40,465,448],{"class":305},[40,467,345],{"class":53},[40,469,470,473,475,477,479,481,483,486,488,491,494,496,499,502],{"class":42,"line":123},[40,471,472],{"class":61},".skin-card",[40,474,169],{"class":53},[40,476,327],{"class":305},[40,478,309],{"class":53},[40,480,342],{"class":305},[40,482,324],{"class":53},[40,484,485],{"class":305},"border-radius",[40,487,309],{"class":53},[40,489,490],{"class":305},"8",[40,492,493],{"class":315},"px",[40,495,324],{"class":53},[40,497,498],{"class":305},"box-shadow",[40,500,501],{"class":53},": ...; }  ",[40,503,504],{"class":46},"\u002F* skin *\u002F\n",[40,506,507,510,512,514,516,519,521,523,525,528,531],{"class":42,"line":145},[40,508,509],{"class":61},".skin-dark",[40,511,169],{"class":53},[40,513,327],{"class":305},[40,515,309],{"class":53},[40,517,518],{"class":305},"#333",[40,520,324],{"class":53},[40,522,337],{"class":305},[40,524,309],{"class":53},[40,526,527],{"class":305},"#eee",[40,529,530],{"class":53},"; }                            ",[40,532,504],{"class":46},[28,534,535],{"language":30},[32,536,538],{"className":34,"code":537,"language":30,"meta":36,"style":36},"\u003C!-- Combine a structure class with a skin class — same layout, any visual. -->\n\u003Cdiv class=\"media skin-card\">\u003Cimg class=\"media__img\">\u003Cdiv class=\"media__body\">...\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[18,539,540,545],{"__ignoreMap":36},[40,541,542],{"class":42,"line":43},[40,543,544],{"class":46},"\u003C!-- Combine a structure class with a skin class — same layout, any visual. -->\n",[40,546,547,549,551,553,555,558,561,563,565,567,570,572,574,576,578,581,584,586,589,591],{"class":42,"line":50},[40,548,54],{"class":53},[40,550,58],{"class":57},[40,552,62],{"class":61},[40,554,65],{"class":53},[40,556,557],{"class":68},"\"media skin-card\"",[40,559,560],{"class":53},">\u003C",[40,562,81],{"class":57},[40,564,62],{"class":61},[40,566,65],{"class":53},[40,568,569],{"class":68},"\"media__img\"",[40,571,560],{"class":53},[40,573,58],{"class":57},[40,575,62],{"class":61},[40,577,65],{"class":53},[40,579,580],{"class":68},"\"media__body\"",[40,582,583],{"class":53},">...\u003C\u002F",[40,585,58],{"class":57},[40,587,588],{"class":53},">\u003C\u002F",[40,590,58],{"class":57},[40,592,72],{"class":53},[23,594,596],{"id":595},"itcss-the-inverted-triangle-by-specificity","ITCSS — the inverted triangle by specificity",[28,598,600],{"language":599},"text",[32,601,605],{"className":602,"code":604,"language":599,"meta":36},[603],"language-text","Settings    → variables (--color, --font)           least specific\nTools       → mixins, functions\nGeneric     → resets, box-sizing\nElements    → bare element selectors (body, a)\nObjects     → layout patterns (.media, .container)\nComponents  → UI components (.card, .nav)\nUtilities   → single-purpose (.text-center, .mt-4)   most specific\n",[18,606,604],{"__ignoreMap":36},[14,608,609,610,612],{},"Each layer is more specific\u002Fexplicit than the one above. Import in order → later layers override earlier. Maps directly to ",[18,611,20],{},".",[23,614,616],{"id":615},"atomic-utility-first-tailwind","Atomic \u002F Utility-First (Tailwind)",[28,618,619],{"language":30},[32,620,622],{"className":34,"code":621,"language":30,"meta":36,"style":36},"\u003Cbutton class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Button\u003C\u002Fbutton>\n",[18,623,624],{"__ignoreMap":36},[40,625,626,628,630,632,634,637,640,642],{"class":42,"line":43},[40,627,54],{"class":53},[40,629,128],{"class":57},[40,631,62],{"class":61},[40,633,65],{"class":53},[40,635,636],{"class":68},"\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"",[40,638,639],{"class":53},">Button\u003C\u002F",[40,641,128],{"class":57},[40,643,72],{"class":53},[14,645,646],{},"No naming — compose utilities in HTML. Small file size with purging. Verbose HTML. Best for component-heavy apps (React\u002FVue) with a design system.",[23,648,650,652],{"id":649},"layer-the-native-architecture-primitive",[18,651,20],{}," — the native architecture primitive",[28,654,655],{"language":155},[32,656,658],{"className":158,"code":657,"language":155,"meta":36,"style":36},"@layer reset, base, layout, components, utilities;\n\n@layer reset { * { box-sizing: border-box; margin: 0; } }\n@layer base { body { font-family: sans-serif; } }\n@layer layout { .container { max-width: 1200px; margin-inline: auto; } }\n@layer components { .card { \u002F* ... *\u002F } .btn { \u002F* ... *\u002F } }\n@layer utilities { .text-center { text-align: center; } .mt-4 { margin-block-start: 1rem; } }\n\u002F* Layer order = precedence. utilities (last) beats components regardless of specificity.\n   This is the modern ITCSS, native and reliable. *\u002F\n",[18,659,660,667,673,706,728,762,786,825,831],{"__ignoreMap":36},[40,661,662,664],{"class":42,"line":43},[40,663,20],{"class":315},[40,665,666],{"class":53}," reset, base, layout, components, utilities;\n",[40,668,669],{"class":42,"line":50},[40,670,672],{"emptyLinePlaceholder":671},true,"\n",[40,674,675,677,680,683,685,688,690,693,695,698,700,703],{"class":42,"line":75},[40,676,20],{"class":315},[40,678,679],{"class":53}," reset { ",[40,681,682],{"class":57},"*",[40,684,169],{"class":53},[40,686,687],{"class":305},"box-sizing",[40,689,309],{"class":53},[40,691,692],{"class":305},"border-box",[40,694,324],{"class":53},[40,696,697],{"class":305},"margin",[40,699,309],{"class":53},[40,701,702],{"class":305},"0",[40,704,705],{"class":53},"; } }\n",[40,707,708,710,713,716,718,721,723,726],{"class":42,"line":101},[40,709,20],{"class":315},[40,711,712],{"class":53}," base { ",[40,714,715],{"class":57},"body",[40,717,169],{"class":53},[40,719,720],{"class":305},"font-family",[40,722,309],{"class":53},[40,724,725],{"class":305},"sans-serif",[40,727,705],{"class":53},[40,729,730,732,735,738,740,743,745,748,750,752,755,757,760],{"class":42,"line":123},[40,731,20],{"class":315},[40,733,734],{"class":53}," layout { ",[40,736,737],{"class":61},".container",[40,739,169],{"class":53},[40,741,742],{"class":305},"max-width",[40,744,309],{"class":53},[40,746,747],{"class":305},"1200",[40,749,493],{"class":315},[40,751,324],{"class":53},[40,753,754],{"class":305},"margin-inline",[40,756,309],{"class":53},[40,758,759],{"class":305},"auto",[40,761,705],{"class":53},[40,763,764,766,769,771,773,775,777,779,781,783],{"class":42,"line":145},[40,765,20],{"class":315},[40,767,768],{"class":53}," components { ",[40,770,166],{"class":61},[40,772,169],{"class":53},[40,774,172],{"class":46},[40,776,234],{"class":53},[40,778,300],{"class":61},[40,780,169],{"class":53},[40,782,172],{"class":46},[40,784,785],{"class":53}," } }\n",[40,787,788,790,793,796,798,801,803,806,809,812,814,817,819,821,823],{"class":42,"line":245},[40,789,20],{"class":315},[40,791,792],{"class":53}," utilities { ",[40,794,795],{"class":61},".text-center",[40,797,169],{"class":53},[40,799,800],{"class":305},"text-align",[40,802,309],{"class":53},[40,804,805],{"class":305},"center",[40,807,808],{"class":53},"; } ",[40,810,811],{"class":61},".mt-4",[40,813,169],{"class":53},[40,815,816],{"class":305},"margin-block-start",[40,818,309],{"class":53},[40,820,448],{"class":305},[40,822,316],{"class":315},[40,824,705],{"class":53},[40,826,828],{"class":42,"line":827},8,[40,829,830],{"class":46},"\u002F* Layer order = precedence. utilities (last) beats components regardless of specificity.\n",[40,832,834],{"class":42,"line":833},9,[40,835,836],{"class":46},"   This is the modern ITCSS, native and reliable. *\u002F\n",[23,838,840],{"id":839},"tips-tricks","💡 Tips & Tricks",[842,843,844,863,877,888,908],"ul",{},[845,846,847,851,852,855,856,855,859,862],"li",{},[848,849,850],"strong",{},"Idiom",": BEM (",[18,853,854],{},".block",", ",[18,857,858],{},".block__element",[18,860,861],{},".block--modifier",") for most projects — flat specificity (all 0,0,1,0), clear ownership, no specificity wars. Double underscore (element), double hyphen (modifier).",[845,864,865,309,867,869,870,873,874,612],{},[848,866,850],{},[18,868,20],{}," to formalize architecture — ",[18,871,872],{},"@layer reset, base, components, utilities;"," makes precedence explicit: utilities beat components regardless of specificity. The end of ",[18,875,876],{},"!important",[845,878,879,881,882,884,885,887],{},[848,880,850],{},": separate structure from skin (OOCSS) — a ",[18,883,417],{}," layout class + a ",[18,886,472],{}," visual class → same layout, any skin; same skin, any layout. Compose, don't couple.",[845,889,890,892,893,855,896,899,900,903,904,907],{},[848,891,850],{},": state classes (",[18,894,895],{},".is-active",[18,897,898],{},".is-loading",") for JS-driven state — a clear contract: JS toggles state classes, CSS styles them. Reserve ",[18,901,902],{},".is-","\u002F",[18,905,906],{},".has-"," for state, not presentation.",[845,909,910,912,913,915],{},[848,911,850],{},": pick ONE methodology and be consistent. BEM + ",[18,914,20],{}," is the solid default for most projects. Tailwind is valid for component-heavy apps. Mixing methodologies creates inconsistency.",[23,917,919],{"id":918},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[842,921,922,935,948,964,974,987,997],{},[845,923,924,309,927,930,931,934],{},[848,925,926],{},"BEM element names shouldn't nest",[18,928,929],{},".card__title__text"," is wrong (a chain). Use ",[18,932,933],{},".card__text"," (flat) or split into a sub-block.",[845,936,937,309,940,943,944,947],{},[848,938,939],{},"BEM modifiers are used WITH the base",[18,941,942],{},"class=\"btn btn--disabled\"",", not ",[18,945,946],{},"class=\"btn--disabled\""," alone. The modifier only sets differences.",[845,949,950,309,953,956,957,960,961,963],{},[848,951,952],{},"Specificity still matters in BEM",[18,954,955],{},".card .card__title"," (0,0,2,0) beats ",[18,958,959],{},".card__title"," (0,0,1,0). BEM's rule: don't nest — use ",[18,962,959],{}," alone.",[845,965,966,969,970,973],{},[848,967,968],{},"Unlayered rules beat layered rules",": if your utilities are in ",[18,971,972],{},"@layer utilities"," and your override is unlayered, the override wins. Layer everything or nothing.",[845,975,976,309,979,982,983,986],{},[848,977,978],{},"State classes shouldn't have global visual styles",[18,980,981],{},".is-active { display: block; }"," as a global rule is wrong — the component should style it (",[18,984,985],{},".tab.is-active { }",").",[845,988,989,992,993,996],{},[848,990,991],{},"Atomic CSS needs purging",": Tailwind generates thousands of utilities. Without purging (via ",[18,994,995],{},"content"," config), the CSS file is huge. Always configure purging.",[845,998,999,309,1005,1008],{},[848,1000,1001,1004],{},[18,1002,1003],{},"@apply"," in Tailwind couples CSS to Tailwind",[18,1006,1007],{},"@apply mt-4;"," makes your CSS dependent on Tailwind's utilities. Use sparingly; prefer composing in JSX\u002FHTML.",[23,1010,1012],{"id":1011},"spot-the-bug","🧠 Spot the Bug",[28,1014,1015],{"language":30},[32,1016,1018],{"className":34,"code":1017,"language":30,"meta":36,"style":36},"\u003Cbutton class=\"btn--disabled\">Click\u003C\u002Fbutton>\n",[18,1019,1020],{"__ignoreMap":36},[40,1021,1022,1024,1026,1028,1030,1032,1034,1036],{"class":42,"line":43},[40,1023,54],{"class":53},[40,1025,128],{"class":57},[40,1027,62],{"class":61},[40,1029,65],{"class":53},[40,1031,277],{"class":68},[40,1033,138],{"class":53},[40,1035,128],{"class":57},[40,1037,72],{"class":53},[1039,1040,1041,1045],"details",{},[1042,1043,1044],"summary",{},"Answer",[14,1046,1047,1048,1051,1052,1055,1056,1060,1061,1063,1064,1067,1068,1071,1072,1074,1075,1077,1078,1081,1082,1084],{},"The button only has ",[18,1049,1050],{},"btn--disabled"," — it's missing the base ",[18,1053,1054],{},"btn"," class. In BEM, a modifier is used ",[1057,1058,1059],"em",{},"with"," the base: ",[18,1062,942],{},". The modifier only sets the ",[1057,1065,1066],{},"differences"," (",[18,1069,1070],{},"background: gray","); it doesn't include the base styles (padding, color, the original background). With only ",[18,1073,1050],{},", the button gets ",[18,1076,1070],{}," but no padding, no ",[18,1079,1080],{},"color: white",", no base styling → broken. Fix: ",[18,1083,942],{},". The base provides the foundation; the modifier overrides. Always include the base class with a modifier.",[1086,1087,1088],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}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 .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}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 .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}",{"title":36,"searchDepth":50,"depth":50,"links":1090},[1091,1094,1095,1096,1097,1099,1100,1101],{"id":25,"depth":50,"text":26,"children":1092},[1093],{"id":251,"depth":75,"text":252},{"id":399,"depth":50,"text":400},{"id":595,"depth":50,"text":596},{"id":615,"depth":50,"text":616},{"id":649,"depth":50,"text":1098},"@layer — the native architecture primitive",{"id":839,"depth":50,"text":840},{"id":918,"depth":50,"text":919},{"id":1011,"depth":50,"text":1012},"BEM flat-specificity naming, OOCSS structure\u002Fskin separation, ITCSS inverted-triangle ordering, Atomic\u002FTailwind utility-first, and @layer as the native architecture primitive. Code-first reference with the modifier-needs-base trap.","md",{},"\u002Fcss\u002F18-architecture-and-methodology",{"title":5,"description":1102},"css\u002F18-architecture-and-methodology","ErTY0KmjMyquU20z2dR5CSclw5JmGSCzpnKp11ddRP0",1789924647522]