Tag: !important

While designing in ADF skin.I came across of significance of !important. ADF developer always afraid of CSS like me. 😛

now we should understand meaning of this

What it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important ‘attribute’ (?) discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {
    /* css */
}

Is normally overruled by:

body div #elementID ul li a {
    /* css */
}

As the latter selector is more specific (and it doesn’t, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the ‘more-‘, or the ‘less-‘, specific selector as it’s always more specific.
If, however, you add !important to the less-specific selector’s CSS declaration, it will have priority.
Using !important has its purposes (though I struggle to think of them), but it’s much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.
It also makes debugging your CSS a nightmare (from personal, empirical, experience).

Lets take an example of ADF skinning.

af|inputText::label
{
background-color: transparent  !important;
background: transparent ;
color : White;
font-weight: bold;
font-size: small;
 margin: 0px;
padding:0px 4px !important; 
}
 

We will define now an style class for using inputText anywhere other place with different layout like

.AfInputSizeBig af|inputText::label
{
background-color: Blue;  // see this
background: transparent ;
color : White;
font-weight: bold;
}
 

If you use AfInputSizeBig style class any where else but back ground color of input label is always transparent because if !important definition earlier.
You should be very careful while creating ADF skin.If you are very sure about cascading of style then use this !important .

I will post more on ADF Skinning.

Till than happy learning with Vinay in Techartifact….