To Use or Not to Use "!important" in CSS

James_F

Curious minds (me) want to know. I saw this earlier today - See http://www.smugocity.com/FAQ/Important - this FAQ strongly advises against the use of "!important" in CSS coding. That said, I see it used a lot by many of you in various CSS coding suggestions.

I'm a CSS newbie (I plagiarize a lot of what you all suggest.) So, what's the right answer - use "!important" or not? I'm simply trying to avoid any SmugMug issues further down the road if "!important" does in fact causes problems or will cause problems later.

Hikin' Mike

In the old (Legacy) Smugmug having to add !important was almost a requirement. With the new SM, you really don't need to unless you get deep into customizing. Looking at my custom CSS, I see two instances...one to change the color of the link in the breadcrumb and one in my gallery (move a section of text).

denisegoldberg

The page you pointed to has an alternative to using !important. If the alternative works then use it.

I still have !important specified for one set of code on my site; that's the only place where adding .sm-user-ui to the code didn't have the desired effect.

--- Denise

leftquark

The use of the "!important" modifier tells the browser that this section of code is more important than what was currently there. If there's a conflict of rules, for example, SM default code says make this font size 20px, and you want it to be 12px, which one wins? CSS typically follows whichever rule comes last. However, in some cases where a parent cascades down to a child, you may want a particular rule to win out more often, and thus we add "!important". I tend to only add !important when there's something already there that I want to make sure gets over-ridden. If SM hasn't set any default value for something, then !important is not needed.

James_F

leftquark wrote: »

The use of the "!important" modifier tells the browser that this section of code is more important than what was currently there. If there's a conflict of rules, for example, SM default code says make this font size 20px, and you want it to be 12px, which one wins? CSS typically follows whichever rule comes last. However, in some cases where a parent cascades down to a child, you may want a particular rule to win out more often, and thus we add "!important". I tend to only add !important when there's something already there that I want to make sure gets over-ridden. If SM hasn't set any default value for something, then !important is not needed.

Thanks "leftquark": Your explanation helps a lot. The FAQ post that I had linked to in my opening post in this thread seems to suggest that !important could cause issues either now or in the future. You've clarified that issue. Having had the benefit of your explanation, I'd suggest that the FAQ post that I alluded to is misleading and needs at least some modification or clarification.

The only concern that I have with your explanation is that someone like myself does not know when we're trying to override a default and when !important is "important". There's no way of knowing what the default is. The process of CSS coding trial and error with SmugMug seems unnecessarily tedious. But I acknowledge that a lot of my SmugMug site tweaks and improvements are a result of using your creative CSS modifications. And, Aaron, I thank you a lot for that. Now, if someone can please teach me how to get the images captions closer to the bottom of my images, I'll be a happy Smugger.

Allen

I use either WebDev or Firebug to test CSS. I first try the rule then if any of the rule parameters do
not work I add the !important. If neither works I have to re-figure the class names.

leftquark

James_F wrote: »

Thanks "leftquark": Your explanation helps a lot. The FAQ post that I had linked to in my opening post in this thread seems to suggest that !important could cause issues either now or in the future. You've clarified that issue. Having had the benefit of your explanation, I'd suggest that the FAQ post that I alluded to is misleading and needs at least some modification or clarification.

The only concern that I have with your explanation is that someone like myself does not know when we're trying to override a default and when !important is "important". There's no way of knowing what the default is. The process of CSS coding trial and error with SmugMug seems unnecessarily tedious. But I acknowledge that a lot of my SmugMug site tweaks and improvements are a result of using your creative CSS modifications. And, Aaron, I thank you a lot for that. Now, if someone can please teach me how to get the images captions closer to the bottom of my images, I'll be a happy Smugger.

Typically the use of !important on a website isn't needed because you, the web designer, are writing the CSS code. Rather than use "!important" you should just go back and get rid of the old code that you're trying to overwrite. In the case of customizations for SmugMug, though, things are a little different. You're overwriting SmugMug's code with your own ...

The use of !important, from what I've read, is actually a perfectly used here -- to create user controlled styles. It lets a user override a websites CSS for their own purposes. That's what you're doing when you customize you're site. In my experience, having a user customize CSS and use !important has not been to any detriment.

You brought up another point -- Smugocity hasn't been updated in quite some time. I've removed it from the stickies in this Forum and suggest people continue to post here with questions or check out Sherlock Photography or my own customization sites

James_F

Thanks again, Aaron. Your clarifications and straight-forward explanations are comforting, knowing that I'm not creating some kind of monster in the closet with regard to CSS coding that will mess things up some day (notwithstanding the fact that occasionally someone who makes site changes at the SmugMug mothership will cause something to no longer work.) Such is life.

leftquark

James_F wrote: »

Thanks again, Aaron. Your clarifications and straight-forward explanations are comforting, knowing that I'm not creating some kind of monster in the closet with regard to CSS coding that will mess things up some day (notwithstanding the fact that occasionally someone who makes site changes at the SmugMug mothership will cause something to no longer work.) Such is life.

Thanks for being so easy to work with James... and so understanding!

I'm going to do my best to post any updates to the "Product News" forum on here. If we release something that might break peoples CSS customizations I'll do my best to let you all know!