home

!important in CSS

I would like to think that all of us are guilty of having used important! out of frustration when some element style just won’t behave as you intended. After having stopped myself from using it freely, I thought I would put some effort into explaining what important! does, providing a little background in CSS, and when you should use it.

!important has been around since the CSS1 specification in 1999, and was introduced to allow developers to override standard specificity rules. Specificity is essentially a weighting given to CSS declarations, and is how browsers make decisions about which CSS property values are the most relevant to an element. [1]

How does the browser use CSS?

Web browsers apply the rules declared in CSS to a document, affecting how elements are displayed and styled. To display a document, the browser must represent the elements defined in the HTML/CSS using the Document Object Model (DOM).

The DOM represents the HTML document as a collection of Nodes and Objects, like a tree. The browser will parse the HTML first, and create a content tree. [4] Whilst this is happening, a render tree is constructed by the browser, containing visual elements in the order they will be displayed.

Diagram explaining how the browser interprets CSS

Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/IntroductiontoCSS/HowCSSworks

Once both of those trees are complete, they both go through a layout process, where the browser instructs the viewport where each node has to be placed on the screen. The viewport is the browser window display area dimensions. The layout process will typically flow from the top-left to the bottom-right.

Diagram further illustrating the interpreting of the trees in the browser

Source: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

The CSS styling will also be loaded and parsed in order to build the render tree. The style properties of each element is calculated using styles from various sources [4]:

  • CSS stylesheets (browser-default, user-provided, author-provided)
  • Inline styles
  • Visual HTML properties

Firefox creates two extra trees for computing styles, whilst WebKit uses style objects, to which the relevant DOM node points. The style declarations are traversed and applied asynchronously.

First non-important high priority properties are applied (properties that should be applied first because others depend on them, such as display), then high priority important, then normal priority non-important, then normal priority important rules. …properties that appear multiple times will be resolved according to the correct cascade order. The last wins. — [4]

The browser will then ‘attach’ style information to the relevant nodes in the DOM. The ‘style object’ for each DOM node will have properties for every visual attribute. If an attribute is not defined by any declared rules found in the styles, some properties can inherit values, whilst some have default values. Default values can depend on which browser is being used.

Diagram outlining the construction and layout of render tree

Source: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How important is !important?

CSS (Cascaded Style Sheets) is named CSS for a reason- the styles in CSS stylesheets are processed in a certain order by a web browser. [5] The importance of styles changes depending on the source, in the following order (least to most important):

  • Browser Styles- default styles applied by your browser.
  • User Styles- custom styles declared by the user using the browser’s user style sheets.
  • Author Styles- author styles declared by the creator of the webpage through stylesheets.
  • !important Author Styles- author styles declared with important! keyword.
  • !important User Styles- user styles declared with important! keyword.
  • Inline Styles- inline styles always overwrite styles in external stylesheets.

Within your CSS file, the important of selectors increases with specificity. The more specific to the element, the more weighting it will be given by the browser [2]:

  1. Type Selectors e.g.

    and Pseudo Elements e.g. ::after

  2. Class Selectors e.g. .container , Attributes Selectors e.g. [target=”_blank”] and Pseudo Classes e.g. :hover .
  3. ID Selectors e.g. #app

If two declarations applied to an element have the same specificity, the one that is declared later in the stylesheet will override the other.

Here is an interactive example of how CSS cascades.

How is !important an exception?

!important breaks the natural order of importance assigned to CSS declarations, adding weight to the specific declaration it is used on.

#app {
  background-color: blue !important;
}

#app #container {
  background-color: fuchsia;
}

Using the example above, the following style is generated:

Result of applying !important

Result of CSS example above

The #app div is blue even though the fuchsia background is declared on that element later on, due to the use of !important interrupting the traditional specificity.

!important itself doesn’t have a specificity ‘value’, as only selectors in CSS are associated directly with specificity. The keyword instead alters the browser’s calculation of which style to apply to an element.

When two declarations using the !important rule are applied to the same element, specificity is used to calculate which one will be used. Here is an example showing how specificity affects the application of !important.


!important is super easy to get used to, and to exploit. It’s often a quick and easy fix to an underlying structural issue in your webpage, or CSS styling issues. It’s important (see what I did there?) to understand that !important should only ever really be used on specific styles which are overriding imported styles, such as when you are using libraries such as Bootstrap.

Instead of resorting to messing with the cascades, you should instead consider how you could get your desired result using properly structured CSS. This could be in the form of adding a more specific rule to the element you are altering, or removing ‘parent’ styles.

This all comes back around to trying to write well-structured and designed HTML and CSS, which is understandable, maintainable and extensible, rather than aiming for quick fixes.

Sources

[1] — MDN Specificity Documentation

[2] — MDN ‘How CSS Works’ Documentation

[3] — Getting Started with Web Accessibility in React

[4] — How Browsers Work: Behind the Scenes of Modern Web Browsers

[5] — CSS !important Rule: How to use it Correctly

Resources

CSS Specificity Wars

StackOverflow answer giving explanation of relationship between !important and CSS specificity

Responsive Web Design- The Viewport

Meet the Pseudo Class Selectors

Visual Formatting Model

Inherited Properties

Calculating the Selector’s Specificity

!important CSS Declarations: How and When to Use Them

When Using !important is the Right Choice