{"id":1943,"date":"2016-06-15T18:42:07","date_gmt":"2016-06-15T18:42:07","guid":{"rendered":"http:\/\/cssreset.com\/?p=1943"},"modified":"2016-06-15T18:42:07","modified_gmt":"2016-06-15T18:42:07","slug":"when-to-use-css-important","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/when-to-use-css-important\/","title":{"rendered":"When to Use CSS !important"},"content":{"rendered":"

Despite the fact that it’s widely used, applying CSS3’s !important declaration to your stylesheets isn’t considered to be a best practice. The !important declaration is typically used to override style rules that are defined elsewhere in the CSS. For example, if you want your links to be red, \u00a0but there’s already a style rule within your CSS that indicates that all a tags should be yellow, you can add an !important declaration to your stylesheets and it will ensure that all a tags will in fact be red, EVEN IF the code defining the red color for the a tags comes BEFORE the code that defines them as yellow. See the example below:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. a{<\/span><\/div><\/li>\n
  2. color<\/span>:<\/span> red<\/span> !important;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. a{<\/span><\/div><\/li>\n
  6. color<\/span>:<\/span> yellow<\/span>;<\/span><\/div><\/li>\n
  7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Without the !important declaration, the rules of CSS indicate that the a tags would be yellow, because in CSS any rule that conflicts with a rule defined above it automatically overrides its predecessor. While the use of this declaration is definitely helpful when you’re in a pinch, it’s not considered a best practice because it makes for sloppy, unorganized code. If your entire stylesheet is littered with !important declarations, you could probably be doing better.<\/p>\n

    The best times to use the !important declaration is when you just can’t figure out what’s wrong with your CSS and why something isn’t working. If you’re in a time crunch, it’s okay to leave the !important declaration, but it’s always a good idea to find the root of the issue and go back and refactor your code later.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    Despite the fact that it’s widely used, applying CSS3’s !important declaration to your stylesheets isn’t considered to be a best practice. The !important declaration is typically used to override style rules that are defined elsewhere in the CSS. For example, […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,41,7,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1943"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1943"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"predecessor-version":[{"id":1944,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1943\/revisions\/1944"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}