!important

TallPhotoGuy

What does !important do

Thanks

denisegoldberg

See "The !important exception" section of this page.

--- Denise

Jtring

Some background. CSS needs to have rules about who wins when more than one style entry could apply to a particular line of HTML. In general, more specific style commands win out over less specific ones. That's one part of the "Cascade" referenced in "Cascading Style Sheet". So CSS entries with more detailed class lists (longer ones) win over less detailed ones (shorter ones). Entries using ID selectors (the things with the # sign) win over those using classes. Style entries in the HTML itself win over both of these. If there are ties, the last style in the CSS block wins.

The "!important" says that that this CSS entry should jump to the head of the line and bypass the precedence rules. That's good because it makes sure that rule gets applied.

That's bad because it makes sure that rule gets applied *everywhere* unless overruled by another "!important" rule. There can be unintended consequences. Managing the CSS code with "!important" flags scattered about can get more convoluted than you would like. The general recommendation is to avoid using "!important" in add-on CSS unless you absolutely must because of the side-effects. Better to just find a more specific class selector. In my add-on CSS, I only use "!important" to override style commands that SmugMug puts directly into the HTML, something they don't do very often. (I'm surprised they do at all. It's generally considered better practice to do all the styling in CSS.)

Hikin' Mike

Just to add...In the old (legacy) you had to use a lot of '!important' rules to override custom CSS. With the new SM, you shouldn't have to use it. Adding '.sm-user-ui' before the rules usually works. Looking at my custom CSS, I had to use it once to override a mobile padding.