{"id":153686,"date":"2013-10-22T05:39:24","date_gmt":"2013-10-22T12:39:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=153686"},"modified":"2013-12-03T20:10:31","modified_gmt":"2013-12-04T03:10:31","slug":"css-specificity-chart","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-specificity-chart\/","title":{"rendered":"CSS Specificity Chart"},"content":{"rendered":"

If you’re going to learn about CSS specificity, it might as well be with The Shining, right? (Or fish<\/a>, or Star Wars<\/a>.)<\/p>\n","protected":false},"excerpt":{"rendered":"

If you’re going to learn about CSS specificity, it might as well be with The Shining, right? (Or fish, or Star Wars.)<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":364152,"url":"https:\/\/css-tricks.com\/manuel-matuzovics-css-specificity-demo\/","url_meta":{"origin":153686,"position":0},"title":"Manuel Matuzovic’s CSS Specificity Demo","date":"February 25, 2022","format":false,"excerpt":"If you're looking for a primer on CSS specificity, we've got that. And if you're trying to get ahead of the game, you should be aware of CSS Cascade Layers as well. One of the ways to help get a grasp of CSS specificity is thinking terms of \"what beats\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":187362,"url":"https:\/\/css-tricks.com\/specificity-graph\/","url_meta":{"origin":153686,"position":1},"title":"The Specificity Graph","date":"October 30, 2014","format":false,"excerpt":"Harry Roberts, on charting CSS selector specificity across entire codebases: A spiky graph is a bad graph. I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. I wonder if that's a worthy goal. Something to draw\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336986,"url":"https:\/\/css-tricks.com\/tools-for-auditing-css\/","url_meta":{"origin":153686,"position":2},"title":"Tools for Auditing CSS","date":"March 29, 2021","format":false,"excerpt":"Auditing CSS is not a common task in a developer\u2019s everyday life, but sometimes you just have to do it. Maybe it\u2019s part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of effort to improve accessibility where all the colors used in the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/css-audit-tools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":192577,"url":"https:\/\/css-tricks.com\/strategies-keeping-css-specificity-low\/","url_meta":{"origin":153686,"position":3},"title":"Strategies for Keeping CSS Specificity Low","date":"January 12, 2015","format":false,"excerpt":"Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375144,"url":"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/","url_meta":{"origin":153686,"position":4},"title":"Taming the Cascade With BEM and Modern CSS Selectors","date":"November 21, 2022","format":false,"excerpt":"BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is \u2013 at least in my Twitter bubble \u2013 one of the better-liked CSS methodologies. Personally, I think BEM is good, and I think you should use it.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340991,"url":"https:\/\/css-tricks.com\/should-devtools-teach-the-css-cascade\/","url_meta":{"origin":153686,"position":5},"title":"Should DevTools teach the CSS cascade?","date":"May 21, 2021","format":false,"excerpt":"Stefan Judis, two days before I mouthed off about using (X, X, X, X) for talking about specificity, has a great blog post not only using that format, but advocating that browser DevTools should show us that value by selectors. I think that the above additions could help to educate\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screenshot_2021-05-02_at_14.32.22.jpeg?fit=1200%2C981&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153686"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=153686"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153686\/revisions"}],"predecessor-version":[{"id":153687,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/153686\/revisions\/153687"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=153686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=153686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=153686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}