!important

You will be able to explain how !important changes CSS cascade order, use it to force a declaration when necessary, and recognize why it should be rare.

What it is

!important is a CSS keyword placed before the semicolon of a declaration. It raises that declaration above normal declarations in the cascade, so it can override rules that would otherwise win because of specificity, source order, or inline styles. Think of it as a loud exception: “use this value even if other rules disagree.” Related terms include the cascade, specificity, source order, inline styles, and author styles.

Why it matters

• It can rescue a component when a third-party stylesheet is too specific to override cleanly.
• It is useful for accessibility or utility classes that must always apply, such as hiding content.
• It helps debug by confirming whether a rule is being overridden.
• It can enforce a critical layout or visibility state during a temporary migration.
• It prevents accidental style changes when a rule is intentionally non-negotiable.

Syntax or steps

The smallest useful pattern is a normal declaration followed by !important:

.selector {
  property: value !important;
}

1. Write the selector and property as usual.
2. Add !important immediately before the semicolon.
3. Use it only after checking specificity, source order, and whether a better selector or layer would solve the problem.

Example

<style>
.card {
  display: block;
  padding: 1rem;
}

.hidden {
  display: none !important;
}

.card.is-hidden {
  display: block;
}
</style>

<div class="card hidden is-hidden">
  This card should be hidden.
</div>

Part by part:

• .card gives cards normal block layout.
• .hidden forces any element with that class to be hidden, even if another rule says display: block.
• .card.is-hidden has higher specificity than .hidden, but it still loses because .hidden uses !important.

Common mistakes

• Using !important to fix specificity problems instead of writing clearer selectors or using CSS layers.
• Adding !important to a shorthand and unintentionally overriding longhand properties.
• Forgetting that another !important rule can still win if it has higher specificity or comes later.
• Leaving !important in production after debugging, making future maintenance harder.

When to use it

Compare !important with normal specificity and CSS layers.

Use !important for rare, explicit exceptions. Prefer normal specificity or layers for regular styling.

Practice

Guided exercise: create a button with a normal background, then add a utility class that forces the background to red using !important.

<style>
.button {
  background: blue;
}

.button-danger {
  background: red !important;
}
</style>

<button class="button button-danger">Delete</button>

Expected output: the button appears red, not blue.

Challenge: remove !important and make the red rule win using specificity only. Hint: use a more specific selector such as .button.button-danger.

Quick check

Question: If a later rule has higher specificity but no !important, and an earlier rule has lower specificity but uses !important, which declaration wins?

Answer: The earlier rule with !important wins, because important declarations are considered before normal declarations in the cascade.

Summary

!important is a deliberate override that changes cascade priority, not a general-purpose specificity tool. Use it sparingly for rare exceptions, and prefer normal selectors, source order, or layers for maintainable CSS.