[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fcss-where-and-is-specificity-resets-and-maintainability":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":406,"translations":474,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":59,"metaTitle":41,"metaDescription":404,"updatedAt":405},"157aab1d-7473-4f3e-aacd-fc1a0df92425","css-where-and-is-specificity-resets-and-maintainability","CSS :where() and :is(): Specificity, Resets, and Maintainability","Many developers overlook the CSS pseudo-classes :where() and :is(), seeing them as \"syntax sugar\". This article reveals how crucial they are for solving specificity chaos, enabling you to create scalable and maintainable CSS. Understand the difference and apply them in resets, components, and design systems.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769711764731-featured-15gbjt.jpeg",false,"6998dfac-6bc0-447b-8100-c4ae3e411dd9","2026-03-23T00:43:32.208+00:00",6,121,{"name":50,"avatar":9},"Genildo Souza",{"slug":6,"name":7,"color":8},[53,56],{"slug":54,"name":55},"css","CSS",{"slug":57,"name":58},"tailwind","Tailwind",{"type":60,"content":61},"doc",[62,88,94,102,125,131,142,153,160,166,172,179,185,192,200,206,212,223,230,246,253,264,269,277,309,335,343,349,356,380,392,401],{"type":63,"attrs":64,"content":66},"blockquote",{"id":65},"quote_c4ta73ey",[67],{"type":68,"attrs":69,"content":71},"paragraph",{"id":70},"p_f8knkxmw",[72,75,80,82,86],{"text":73,"type":74},"Have you ever written the same CSS block three times, only changing the selector? That's exactly the pain that ","text",{"text":76,"type":74,"marks":77},":is()",[78],{"type":79},"code",{"text":81,"type":74}," and ",{"text":83,"type":74,"marks":84},":where()",[85],{"type":79},{"text":87,"type":74}," solve — and the difference between the two is more important than it seems.",{"type":68,"attrs":89,"content":91},{"id":90},"p_nyi1jz9g",[92],{"text":93,"type":74},"Does this CSS look familiar to you:",{"type":95,"attrs":96,"content":99},"codeBlock",{"id":97,"language":9,"highlighted":98},"code_p85j4ia1","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">header a,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">footer a,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">nav a {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">decoration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: none;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[100],{"text":101,"type":74},"header a,\nfooter a,\nnav a {\n  color: blue;\n  text-decoration: none;\n}",{"type":68,"attrs":103,"content":105},{"id":104},"p_177827y4",[106,108,112,114,118,119,123],{"text":107,"type":74},"Repeating the same rule for three different contexts. Now imagine you have ten contexts. And each one has three state variations — ",{"text":109,"type":74,"marks":110},":hover",[111],{"type":79},{"text":113,"type":74},", ",{"text":115,"type":74,"marks":116},":focus",[117],{"type":79},{"text":113,"type":74},{"text":120,"type":74,"marks":121},":visited",[122],{"type":79},{"text":124,"type":74},". The CSS file turns into a phone book.",{"type":68,"attrs":126,"content":128},{"id":127},"p_xyfmurqf",[129],{"text":130,"type":74},"Modern CSS has an answer for this. Two, actually — and they look the same but behave differently in a detail that will save you from subtle bugs.",{"type":132,"attrs":133,"content":136},"heading",{"id":134,"level":135},"h_djrfoc4s",3,[137],{"text":138,"type":74,"marks":139},":is() — group selectors without repetition",[140],{"type":141},"bold",{"type":68,"attrs":143,"content":145},{"id":144},"p_feze1ezv",[146,148,151],{"text":147,"type":74},"The ",{"text":76,"type":74,"marks":149},[150],{"type":79},{"text":152,"type":74}," accepts a list of selectors and applies the style to any one that matches. The block above becomes:",{"type":95,"attrs":154,"content":157},{"id":155,"language":9,"highlighted":156},"code_162d818q","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(header, footer, nav) a {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">decoration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: none;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[158],{"text":159,"type":74},":is(header, footer, nav) a {\n  color: blue;\n  text-decoration: none;\n}",{"type":68,"attrs":161,"content":163},{"id":162},"p_ug5ohwq7",[164],{"text":165,"type":74},"One line, same result. The browser interprets this exactly like the repeated version — semantically they are equivalent.",{"type":68,"attrs":167,"content":169},{"id":168},"p_vmtc0mwz",[170],{"text":171,"type":74},"It gets more interesting when you combine it with pseudo-classes:",{"type":95,"attrs":173,"content":176},{"id":174,"language":9,"highlighted":175},"code_m2k1no48","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Before — repeating for each state *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:hover,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:focus,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:active {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: darkblue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* After — clean *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(:hover, :focus, :active) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: darkblue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[177],{"text":178,"type":74},"\u002F* Before — repeating for each state *\u002F\nbutton:hover,\nbutton:focus,\nbutton:active {\n  background: darkblue;\n}\n\n\u002F* After — clean *\u002F\nbutton:is(:hover, :focus, :active) {\n  background: darkblue;\n}",{"type":68,"attrs":180,"content":182},{"id":181},"p_xhu590ze",[183],{"text":184,"type":74},"Or to style headings all at once:",{"type":95,"attrs":186,"content":189},{"id":187,"language":9,"highlighted":188},"code_3e339a1p","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* All headings within article *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">article\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(h1, h2, h3, h4) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">family\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: Georgia, serif;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[190],{"text":191,"type":74},"\u002F* All headings within article *\u002F\narticle :is(h1, h2, h3, h4) {\n  font-family: Georgia, serif;\n  line-height: 1.3;\n}",{"type":132,"attrs":193,"content":195},{"id":194,"level":135},"h_hkrfuatv",[196],{"text":197,"type":74,"marks":198},":where() — identical, but without specificity weight",[199],{"type":141},{"type":68,"attrs":201,"content":203},{"id":202},"p_8xmkhk72",[204],{"text":205,"type":74},"Here lies the difference that matters.",{"type":207,"attrs":208},"image",{"id":209,"alt":210,"src":211,"title":210},"img_qvspwu6v","Minimalist flat design, technical diagram, clean vector illustration, dark theme, professional tech blog style. A comparison showing CSS specificity. Left side: A block representing ':is()' with a large 'S' (Specificity) icon and an arrow pointing from a sub-element (e.g., '#id') to the main block, indicating 'Inherits highest specificity'. Right side: A block representing ':where()' with a '0' icon, indicating 'Zero Specificity'. Use different colored shapes for specificity levels (e.g., red for high, green for zero). NOT include text, explain concepts visually.","http:\u002F\u002Fhailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com\u002Fimage_inference_output%2Ftalkie%2Fprod%2Fimg%2F2026-03-23%2F749d37fc-a01f-4593-afe9-a387f79a0026_aigc.jpeg?Expires=1774312885&OSSAccessKeyId=LTAI5tRDTcyEYLLuBEpJRwCi&Signature=P3WOSjtElO1CRAAAR8yCR82M5c0%3D",{"type":68,"attrs":213,"content":215},{"id":214},"p_nf3ja4rq",[216,218,221],{"text":217,"type":74},"Specificity in CSS is the scoring system that decides which rule wins when two contradict each other. An ID selector is worth more than a class, which is worth more than a tag. When you use ",{"text":76,"type":74,"marks":219},[220],{"type":79},{"text":222,"type":74},", the specificity of the strongest selector inside the parentheses propagates to the entire rule.",{"type":95,"attrs":224,"content":227},{"id":225,"language":9,"highlighted":226},"code_knf6ltbd","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* :is() inherits the specificity of #header — high *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(#header, .nav, footer) a {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ↑ this selector has ID specificity\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">   because of #header, even if the element\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">   is .nav or footer *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[228],{"text":229,"type":74},"\u002F* :is() inherits the specificity of #header — high *\u002F\n:is(#header, .nav, footer) a {\n  color: blue;\n}\n\u002F* ↑ this selector has ID specificity\n   because of #header, even if the element\n   is .nav or footer *\u002F",{"type":68,"attrs":231,"content":233},{"id":232},"p_j4xelwvo",[234,235,238,240,244],{"text":147,"type":74},{"text":83,"type":74,"marks":236},[237],{"type":79},{"text":239,"type":74}," works the same in behavior — but it has ",{"text":241,"type":74,"marks":242},"zero",[243],{"type":141},{"text":245,"type":74}," specificity. Always. No matter what you put inside.",{"type":95,"attrs":247,"content":250},{"id":248,"language":9,"highlighted":249},"code_nspzow3d","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* :where() — zero specificity *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">where\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(#header, .nav, footer) a {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: blue;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* ↑ easy to override — any class\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">   or tag selector already wins *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[251],{"text":252,"type":74},"\u002F* :where() — zero specificity *\u002F\n:where(#header, .nav, footer) a {\n  color: blue;\n}\n\u002F* ↑ easy to override — any class\n   or tag selector already wins *\u002F",{"type":68,"attrs":254,"content":256},{"id":255},"p_7z2emoh7",[257,259,262],{"text":258,"type":74},"In practice, this means that ",{"text":83,"type":74,"marks":260},[261],{"type":79},{"text":263,"type":74}," is ideal for base styles and resets — you define them without locking in the developer who will customize them later.",{"type":207,"attrs":265},{"id":266,"alt":267,"src":268,"title":267},"img_iiioyl9w","Minimalist flat design, technical diagram, clean vector illustration, dark theme, professional tech blog style. A side-by-side comparison illustrating CSS rule overriding. Left side: 'Problem with :is()'. Show a base rule (e.g., a gray rectangle for 'color: gray') defined using ':is()' with a large 'S' (specificity) icon, blocking a subsequent, simpler rule (e.g., a black rectangle for 'color: black') represented by a smaller 'S' (specificity) icon, with a crossed-out arrow indicating failure to override. Right side: 'Solution with :where()'. Show a base rule (gray rectangle) defined using ':where()' with a '0' (zero specificity) icon, and a subsequent, simpler rule (black rectangle) represented by a small 'S' (specificity) icon successfully overriding it, with a checkmark. NOT include text, explain concepts visually.","http:\u002F\u002Fhailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com\u002Fimage_inference_output%2Ftalkie%2Fprod%2Fimg%2F2026-03-23%2F2640dd5e-655a-4857-855d-80baad05471f_aigc.jpeg?Expires=1774312940&OSSAccessKeyId=LTAI5tRDTcyEYLLuBEpJRwCi&Signature=tdpGKyy04gm3UBI5XbOVDL5VNXI%3D",{"type":132,"attrs":270,"content":272},{"id":271,"level":135},"h_112yr7cp",[273],{"text":274,"type":74,"marks":275},"The real-world difference",[276],{"type":141},{"type":278,"attrs":279,"content":281},"compare",{"id":280},"cmp_4ll68iyq",[282,296],{"type":283,"attrs":284,"content":288},"compareColumn",{"id":285,"side":286,"title":287},"col_b8sey78j","left","Problem with :is()",[289],{"type":95,"attrs":290,"content":293},{"id":291,"language":9,"highlighted":292},"code_3nwls33a","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* base.css *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(article, section) p {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: gray;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* theme.css — will not work *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">p {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: black;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* :is(article, section) p has\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">   higher specificity than p *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[294],{"text":295,"type":74},"\u002F* base.css *\u002F\n:is(article, section) p {\n  color: gray;\n}\n\n\u002F* theme.css — will not work *\u002F\np {\n  color: black;\n}\n\u002F* :is(article, section) p has\n   higher specificity than p *\u002F",{"type":283,"attrs":297,"content":301},{"id":298,"side":299,"title":300},"col_2sjbheus","right","Solution with :where()",[302],{"type":95,"attrs":303,"content":306},{"id":304,"language":9,"highlighted":305},"code_zlv1oo58","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* base.css *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">where\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(article, section) p {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: gray;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* theme.css — works *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">p {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: black;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* :where() has zero specificity\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">   any p wins in an override *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[307],{"text":308,"type":74},"\u002F* base.css *\u002F\n:where(article, section) p {\n  color: gray;\n}\n\n\u002F* theme.css — works *\u002F\np {\n  color: black;\n}\n\u002F* :where() has zero specificity\n   any p wins in an override *\u002F",{"type":310,"attrs":311,"content":314},"callout",{"id":312,"type":313,"title":9},"call_y2ma2ub1","info",[315],{"type":68,"attrs":316,"content":318},{"id":317},"p_i4xlrj0f",[319,323,325,328,330],{"text":320,"type":74,"marks":321},"Modern CSS resets use :where() for this reason.",[322],{"type":141},{"text":324,"type":74}," Tailwind, Open Props, and several popular resets use ",{"text":83,"type":74,"marks":326},[327],{"type":79},{"text":329,"type":74}," to define base styles that never lock in the developer. The intention is: ",{"text":331,"type":74,"marks":332},"\"this is the default, but anything you write easily overrides it.\"",[333],{"type":334},"italic",{"type":132,"attrs":336,"content":338},{"id":337,"level":135},"h_egevums4",[339],{"text":340,"type":74,"marks":341},"An example that combines both",[342],{"type":141},{"type":68,"attrs":344,"content":346},{"id":345},"p_5qo66ftr",[347],{"text":348,"type":74},"In a design system, you would use both in different layers:",{"type":95,"attrs":350,"content":353},{"id":351,"language":9,"highlighted":352},"code_l9dd1bai","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Base layer — :where() to avoid locking anyone in *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">where\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(h1, h2, h3, h4, h5, h6) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 0.5em;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Component layer — :is() for specific contexts *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.card :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(h2, h3) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 1.25rem;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(--color-heading);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Interactive states — :is() because weight matters *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.btn:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">is\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(:hover, :focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">visible) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2px solid currentColor;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: 2px;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[354],{"text":355,"type":74},"\u002F* Base layer — :where() to avoid locking anyone in *\u002F\n:where(h1, h2, h3, h4, h5, h6) {\n  margin: 0 0 0.5em;\n  line-height: 1.2;\n}\n\n\u002F* Component layer — :is() for specific contexts *\u002F\n.card :is(h2, h3) {\n  font-size: 1.25rem;\n  color: var(--color-heading);\n}\n\n\u002F* Interactive states — :is() because weight matters *\u002F\n.btn:is(:hover, :focus-visible) {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}",{"type":310,"attrs":357,"content":360},{"id":358,"type":359,"title":9},"call_s0uasjk4","warning",[361],{"type":68,"attrs":362,"content":364},{"id":363},"p_yhi37tr4",[365,369,371,374,375,378],{"text":366,"type":74,"marks":367},"Be careful with invalid selectors inside :is().",[368],{"type":141},{"text":370,"type":74}," If you place an invalid selector in a comma-separated list in traditional CSS, the entire rule is ignored. With ",{"text":76,"type":74,"marks":372},[373],{"type":79},{"text":81,"type":74},{"text":83,"type":74,"marks":376},[377],{"type":79},{"text":379,"type":74},", invalid selectors are silently discarded — the others continue to work. This is an advantage, but it can hide typos.",{"type":381,"attrs":382},"summaryBox",{"id":383,"items":384,"title":391},"sum_lzlwle27",[385,386,387,388,389,390],":is() groups selectors and inherits the specificity of the strongest one in the list.",":where() does the same but with zero specificity — always overridable.","Use :where() in resets and base styles that should not lock in customization.","Use :is() in components and interactive states where specificity matters.","Both eliminate selector repetition — your CSS becomes smaller and more readable.","Browser support: all modern browsers. No compatibility concerns.","What you should take away from this",{"type":393,"attrs":394},"promoBox",{"id":395,"title":396,"ctaHref":397,"eyebrow":398,"ctaLabel":399,"description":400},"promo_swwwpe22","Want to dive deeper into this topic?","\u002Ftags\u002Fcss","Featured","Explore","If you want to explore this topic from another angle, I've curated related readings with practical examples and applications.",{"type":68,"attrs":402},{"id":403},"p_ax3gpv56","Master :where() and :is() in CSS to resolve specificity wars. Learn to create resets, group selectors, and simplify your CSS code maintenance.","2026-08-24T14:53:53.315534+00:00",[407,424,441,455],{"id":408,"slug":409,"title":410,"excerpt":411,"image":412,"featured":44,"groupId":413,"publishedAt":414,"readingTime":415,"views":416,"author":417,"category":418,"tags":419},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg","bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,0,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[420,421],{"slug":54,"name":55},{"slug":422,"name":423},"performance","Performance",{"id":425,"slug":426,"title":427,"excerpt":428,"image":429,"featured":44,"groupId":430,"publishedAt":431,"readingTime":23,"views":416,"author":432,"category":433,"tags":434},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[435,438],{"slug":436,"name":437},"javascript","JavaScript",{"slug":439,"name":440},"react","React",{"id":442,"slug":443,"title":444,"excerpt":445,"image":446,"featured":44,"groupId":447,"publishedAt":448,"readingTime":449,"views":416,"author":450,"category":451,"tags":452},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[453,454],{"slug":54,"name":55},{"slug":422,"name":423},{"id":456,"slug":457,"title":458,"excerpt":459,"image":460,"featured":44,"groupId":461,"publishedAt":462,"readingTime":463,"views":416,"author":464,"category":465,"tags":466},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[467,470,471],{"slug":468,"name":469},"angular","Angular",{"slug":436,"name":437},{"slug":472,"name":473},"typescript","TypeScript",{"en":40,"pt":475,"es":476},"css-where-e-is-especificidade-resets-e-manutencao","css-where-y-is-especificidad-resets-y-mantenimiento"]