{"id":9462,"date":"2011-05-22T14:20:12","date_gmt":"2011-05-22T21:20:12","guid":{"rendered":"http:\/\/css-tricks.com\/?p=9462"},"modified":"2021-06-25T08:12:50","modified_gmt":"2021-06-25T15:12:50","slug":"when-using-important-is-the-right-choice","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/when-using-important-is-the-right-choice\/","title":{"rendered":"When Using !important is The Right Choice"},"content":{"rendered":"\n

Inspiration from Stephanie Rewis<\/a>:<\/p>\n\n\n\n

Using !important in your CSS usually means you’re narcissistic & selfish or lazy. Respect the devs to come…<\/p><\/blockquote>\n\n\n\n

For those that don’t know, an !important<\/code> rule works like this:<\/p>\n\n\n\n

p {\n  color: red !important;\n}\n#thing {\n  color: green;\n}<\/code><\/pre>\n\n\n\n
<p id=\"thing\">Will be RED.<\/p><\/code><\/pre>\n\n\n\n
The paragraph is will be red<\/a>, even though the ID selector has higher specificity. The !important<\/code> rule overrides that particular property.<\/p>\n\n\n\n
Stephanie, surely out of frustration, was talking about how postscripting your CSS values with !important<\/code> can be highly abused and make for messy and hard to maintain CSS. The unfortunate typical use case goes like this:<\/p>\n\n\n\n
  1. WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG<\/li>
  2. (use !important rule)<\/li>
  3. OK, now it’s working<\/li><\/ol>\n\n\n\n
    Then the next person comes along and tries to make new changes. He tries to alter some existing CSS rules, but now their<\/strong> changes aren’t behaving how they should. He traces the issue back to the !important<\/code> rules, then has a choice. He can try and remove those and attempt to get things back on track, or add some more of his own to fight them and get his change done. Since he might not know exactly why those !important<\/code> rules were added in the first place, he might opt for the second option for fear of breaking something somewhere else on the site he’s not aware of. And thus the vicious cycle starts.<\/p>\n\n\n
    Potentially good use case: utility classes<\/h3>\n\n\n
    So when is the !important<\/code> rule actually useful and a good idea? In my opinion, utility classes are a good use case.<\/p>\n\n\n\n
    Think of “buttons.” Let’s say you have a class name of .button<\/code> on your site and whatever element you put it on, you want that element to look like a button: specific font, rounded corners, special background and borders, whatever. So you do this:<\/p>\n\n\n\n
    .button {\n   background: red; \n   color: white;\n   padding: 3px;\n   border-radius: 5px;\n   border: 1px solid black;\n}<\/code><\/pre>\n\n\n\n
    <a class=\"button\" href=\"#\">Do Thing<\/a><\/code><\/pre>\n\n\n\n
    The specificity<\/a> for that is 0,0,1,0<\/code>. As soon as that element has another selector affecting it that has a higher specificity, you may have styling issues. Like:<\/p>\n\n\n\n
    <section id=\"content\">\n   <p>text text blah <a href=\"#\" class=\"button\">Do Thing<\/a><\/p>\n<\/section><\/code><\/pre>\n\n\n\n
    #content a {\n  border-bottom: 1px dotted blue;\n}<\/code><\/pre>\n\n\n\n
    Now those buttons you have a specific design for have a dotted blue bottom border, which is not what you want. Here’s a fiddle<\/a> of that kinda scenario happening.<\/p>\n\n\n\n
    I don’t think this is the fault of sloppy CSS. It’s easy and often perfectly valid to write a CSS selector that has a higher specificity value than 0,0,1,0<\/code> and accidentally screws up a button.<\/p>\n\n\n\n
    To make your button class super robust and not easily trifled with, put !important rules on the values. And maybe even add in a few that your button doesn’t need but could screw it up.<\/p>\n\n\n\n
    .button {\n   background: red            !important;\n   color: white               !important;\n   padding: 3px               !important;\n   border-radius: 5px         !important;\n   border: 1px solid black    !important;\n\n   \/* For good measure *\/     \n   text-decoration: none      !important;\n}<\/code><\/pre>\n\n\n\n
    Any other “utility class” could benefit from this. Think of the popular “clearfix” class<\/a>, which uses pseudo-elements to do its thing. Pseudo-elements are becoming more popular and being used for more things, so it would be possible to have a selector override the clearfix pseudo-elements and have the float clearing fail. Almost certainly not what you want, so adding !important rules to those could be useful.<\/p>\n\n\n\n
    I even talked to Nicole Sullivan who said she’d be adding !important rules to the spacer classes that she uses in her OOCSS framework<\/a>, and she’s a hard sell on this idea, since her style of writing CSS actually makes writing selectors with a higher specificity than 0,0,1,0<\/code> kind of rare.<\/p>\n\n\n
    User style sheets<\/h3>\n\n\n
    I believe the original use case and reason !important<\/code> rules exist is user stylesheets. That is, a custom stylesheet written by you that you tell the web browser to apply to every page visited. This is particularly easy to do in a browser like Safari. Preferences > Advanced > Stylesheet and select one. In this user stylesheet, you might do things like hide comments<\/a>, hide ads<\/a>, or attempt your own readability improvements by settings colors and sizes on fonts.<\/p>\n\n\n\n
    Since these styles apply to all websites, not specific websites, you’ll need to write fairly generic selectors that are the most likely to apply to all sites, like body { }<\/code>. But a selector like that has very low specificity (0,0,0,1<\/code>) and is likely to be beaten by a websites own styles. And so, !important rules allow you write generic selectors but still have the power to change things.<\/p>\n\n\n
    Others?<\/h3>\n\n\n
    So what about you folks? Got some use cases for !important<\/code> you think are solid? I’d be interested to hear.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we’ll cover here.<\/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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":343850,"url":"https:\/\/css-tricks.com\/meta-theme-color-and-trickery\/","url_meta":{"origin":9462,"position":0},"title":"Meta Theme Color and Trickery","date":"July 13, 2021","format":false,"excerpt":"Starting with Version 15, Safari supports the theme-color  tag both on macOS and iOS. That\u2019s exciting news because now the first desktop browser supports this  tag and it also supports the media attribute and the prefers-color-scheme media feature. I never really took much note of the theme-color meta\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/meta-theme-color.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300936,"url":"https:\/\/css-tricks.com\/so-many-color-links\/","url_meta":{"origin":9462,"position":1},"title":"So Many Color Links","date":"December 27, 2019","format":false,"excerpt":"There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That's a nice\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Untitled_Artwork-scaled.jpg?fit=1200%2C502&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305700,"url":"https:\/\/css-tricks.com\/wide-gamut-color-in-css-with-display-p3\/","url_meta":{"origin":9462,"position":2},"title":"Wide Gamut Color in CSS with Display-P3","date":"March 31, 2020","format":false,"excerpt":"Here\u2019s something I\u2019d never heard of before: Display-P3 support in CSS Color Module Level 4 spec. This is a new color profile supported by certain displays and it introduces a much wider range of colors that we can choose from. Right now the syntax looks something like this in CSS:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/p3-display-color.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356611,"url":"https:\/\/css-tricks.com\/color-alpha-anywhere\/","url_meta":{"origin":9462,"position":3},"title":"Color Alpha Anywhere","date":"November 15, 2021","format":false,"excerpt":"In my \"Different Degrees of Custom Property\u00a0Usage\" article, I noted a situation about colors and CSS custom properties where I went \"too far\" with breaking up HSL color values. Breaking every single color into its H, S, and L parts is may be a step too far. But you probably\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/stripe-accessible-colors.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311311,"url":"https:\/\/css-tricks.com\/the-expanding-gamut-of-color-on-the-web\/","url_meta":{"origin":9462,"position":4},"title":"The Expanding Gamut of Color on the Web","date":"May 27, 2020","format":false,"excerpt":"CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS \u2014 whether defined with the RGB, HSL, or hexadecimal format \u2014 catered to the monitors of the time, all within the sRGB colorspace. Most newer\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/color-gamut.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359430,"url":"https:\/\/css-tricks.com\/the-surprising-behavior-of-important-in-css-custom-property-values\/","url_meta":{"origin":9462,"position":5},"title":"The surprising behavior of !important in CSS custom property values","date":"December 17, 2021","format":false,"excerpt":"Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide about them. \ud83d\ude2c But hey it's now updated. Stefan Judis documents it clearly. The deal is that !important is not at all used in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/important-color.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9462"}],"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=9462"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9462\/revisions"}],"predecessor-version":[{"id":343208,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9462\/revisions\/343208"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=9462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}