{"id":39,"date":"2025-06-23T16:46:10","date_gmt":"2025-06-23T11:16:10","guid":{"rendered":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/?p=39"},"modified":"2025-06-23T17:08:24","modified_gmt":"2025-06-23T11:38:24","slug":"css-cascade-layers-vs-bem-vs-utility-classes-specificity-control","status":"publish","type":"post","link":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/fostering\/css-cascade-layers-vs-bem-vs-utility-classes-specificity-control.html","title":{"rendered":"CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control"},"content":{"rendered":"<p>CSS is wild, really wild. And tricky. But let\u2019s talk specifically about\u00a0<strong>specificity<\/strong>.<\/p>\n<p>When writing CSS, it\u2019s close to impossible that you haven\u2019t faced the frustration of styles not applying as expected \u2014 that\u2019s specificity. You applied a style, it worked, and later, you try to override it with a different style and\u2026 nothing, it just ignores you. Again, specificity.<\/p>\n<p>Sure, there\u2019s the option of resorting to\u00a0<code>!important<\/code>\u00a0flags, but like all developers before us, it\u2019s always\u00a0<a href=\"https:\/\/cssguidelin.es\/#important\">risky and discouraged<\/a>. It\u2019s way better to fully understand specificity than go down that route because otherwise you wind up fighting your own important styles.<\/p>\n<h2 id=\"specificity-101\">Specificity 101\u00a0<a class=\"anchor\" href=\"https:\/\/www.smashingmagazine.com\/2025\/06\/css-cascade-layers-bem-utility-classes-specificity-control\/#specificity-101\">#<\/a><\/h2>\n<p>Lots of developers understand the concept of specificity in different ways.<\/p>\n<blockquote><p>The core idea of specificity is that the CSS Cascade algorithm used by browsers determines which style declaration is applied when two or more rules match the same element.<\/p><\/blockquote>\n<p>Think about it. As a project expands, so do the specificity challenges. Let\u2019s say Developer A adds\u00a0<code>.cart-button<\/code>, then maybe the button style looks good to be used on the sidebar, but with a little tweak. Then, later, Developer B adds\u00a0<code>.cart-button .sidebar<\/code>, and from there, any future changes applied to\u00a0<code>.cart-button<\/code>\u00a0might get overridden by\u00a0<code>.cart-button .sidebar<\/code>, and just like that, the specificity war begins.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS is wild, really wild. And tricky. But let\u2019s talk specifically about\u00a0specificity. When writing [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":20,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"coauthors":[5],"class_list":["post-39","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fostering"],"acf":[],"_links":{"self":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":1,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/posts\/39\/revisions\/40"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/media\/20"}],"wp:attachment":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/tags?post=39"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/consumer-industries\/wp-json\/wp\/v2\/coauthors?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}