[{"data":1,"prerenderedAt":73},["ShallowReactive",2],{"term-c\u002Fcascade-layers":3,"related-c\u002Fcascade-layers":64},{"id":4,"title":5,"acronym":6,"body":7,"category":45,"description":46,"difficulty":47,"extension":48,"letter":49,"meta":50,"navigation":51,"path":52,"related":53,"seo":58,"sitemap":59,"stem":62,"subcategory":6,"__hash__":63},"terms\u002Fterms\u002Fc\u002Fcascade-layers.md","Cascade Layers",null,{"type":8,"value":9,"toc":38},"minimark",[10,15,19,23,31,35],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Cascade layers let you group CSS rules into named layers and control the order they apply. Put third-party styles in a 'reset' layer, your design system in a 'components' layer, your overrides in an 'overrides' layer. Specificity wars end.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25,26,30],{},"Cascade layers (@layer) are a CSS feature that groups rules into explicit ordered layers, with layer precedence taking priority over specificity. Solves long-standing cascade ordering problems when mixing third-party CSS, utility frameworks, and component styles. Widely supported since 2022. Enables safer CSS architecture without resorting to ",[27,28,29],"code",{},"!important"," or deeply-nested selectors.",[11,32,34],{"id":33},"when-youll-hear-this","When You'll Hear This",[16,36,37],{},"\"Wrapped the reset in @layer — no more specificity fights.\" \u002F \"Cascade layers made Tailwind and component styles coexist cleanly.\"",{"title":39,"searchDepth":40,"depth":40,"links":41},"",2,[42,43,44],{"id":13,"depth":40,"text":14},{"id":21,"depth":40,"text":22},{"id":33,"depth":40,"text":34},"frontend","Cascade layers let you group CSS rules into named layers and control the order they apply.","intermediate","md","c",{},true,"\u002Fterms\u002Fc\u002Fcascade-layers",[54,55,56,57],"CSS","Specificity","CSS Architecture","Tailwind",{"title":5,"description":46},{"changefreq":60,"priority":61},"weekly",0.7,"terms\u002Fc\u002Fcascade-layers","dr6RoUKHEP4iC0rQOuOs8bcbWWFBDao6odJaUh4g3aM",[65,70],{"title":54,"path":66,"acronym":67,"category":45,"difficulty":68,"description":69},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","beginner","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":57,"path":71,"acronym":6,"category":45,"difficulty":68,"description":72},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518264230]