The !important Rule CSS Guide

Introduction

CSS usually decides which style wins by using the cascade.

The cascade looks at things like:

1where the CSS comes from2whether a declaration is marked important3selector specificity4source order

Most of the time, you should let the normal cascade do its job.

But CSS also has a special rule called !important.

Example:

1p {2  color: red !important;3}

The !important flag makes a CSS declaration harder to override.

It tells the browser:

1Treat this declaration as more important than normal declarations.

This can be useful in specific situations.

But it should be used carefully.

If you use !important too often, your CSS can become harder to understand, harder to override, and harder to maintain.

What Is !important?

!important is a special flag added to a CSS declaration.

A normal declaration looks like this:

1p {2  color: blue;3}

An important declaration looks like this:

1p {2  color: blue !important;3}

The !important part comes after the value and before the semicolon.

Correct:

1p {2  color: blue !important;3}

Incorrect:

1p {2  !important color: blue;3}

Incorrect:

1p {2  color: !important blue;3}

The correct pattern is:

1property: value !important;

A Simple !important Example

CSS:

1p {2  color: blue !important;3}4 5p {6  color: red;7}

HTML:

1<p>This paragraph is blue.</p>

The paragraph becomes blue.

Why?

The first rule uses !important.

The second rule is normal.

Even though the red rule comes later, the blue rule wins because it is marked important.

!important Works on Individual Declarations

!important does not make a whole CSS rule important.

It only affects the declaration where it appears.

Example:

1.card {2  color: navy !important;3  background-color: white;4}5 6.card {7  color: red;8  background-color: yellow;9}

The final styles are:

1color: navy;2background-color: yellow;

Why?

The first color declaration is important, so it beats the later normal color.

But background-color: white; is not important.

So the later background-color: yellow; wins.

This is important.

!important works property by property.

What !important Does

The !important flag changes the priority of a declaration in the cascade.

Example:

1.alert {2  color: red;3}4 5.alert {6  color: green !important;7}

The text becomes green.

The green declaration wins because it is important.

A simple way to think about it is:

1important declarations beat normal declarations

But there is more detail.

If two declarations are both important, the browser still needs to decide which important declaration wins.

That is where specificity and source order still matter.

!important Does Not Mean “Always Wins”

This is a common mistake.

!important is powerful, but it does not mean the declaration can never be overridden.

Example:

1.notice {2  color: blue !important;3}4 5#main-notice {6  color: red !important;7}

HTML:

1<p id=”main-notice” class=”notice”>2  Important message3</p>

The paragraph becomes red.

Why?

Both declarations are important.

So the browser compares specificity.

The ID selector is more specific than the class selector.

Because both declarations are important, the more specific important declaration wins.

Normal Specificity Example

Without !important, specificity works like this:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

The class selector is more specific than the type selector.

!important Can Override Higher Specificity Normal Rules

Now add !important:

1p {2  color: black !important;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes black.

Why?

The p selector is less specific.

But its color declaration is important.

The .intro declaration is normal.

An important declaration can beat a normal declaration even when the normal declaration uses a more specific selector.

Important Declarations Still Compare Specificity

If both declarations are important, specificity matters again.

Example:

1p {2  color: black !important;3}4 5.intro {6  color: navy !important;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

Both declarations are important.

The .intro selector is more specific than p.

So .intro wins.

A useful rule is:

1!important beats normal declarations.2When both declarations are important, specificity still matters.

Important Declarations Still Use Source Order

If two important declarations have the same specificity, the later one wins.

Example:

1.message {2  color: green !important;3}4 5.message {6  color: blue !important;7}

HTML:

1<p class=”message”>Your settings were saved.</p>

The paragraph becomes blue.

Both selectors are the same.

Both declarations are important.

The second rule comes later.

So the second important declaration wins.

Source Order Example

Reverse the order:

1.message {2  color: blue !important;3}4 5.message {6  color: green !important;7}

Now the paragraph becomes green.

The selector did not change.

The importance did not change.

Only the order changed.

Because the specificity is equal, the later important declaration wins.

!important and Inline Styles

Inline styles are written directly in the HTML element.

Example:

1<p style=”color: red;”>2  This paragraph has an inline style.3</p>

Inline styles usually have very high priority compared with normal stylesheet rules.

Example:

1<p class=”intro” style=”color: red;”>2  Welcome.3</p>

CSS:

1.intro {2  color: blue;3}

The paragraph becomes red.

The inline style wins over the normal class rule.

!important Can Override Normal Inline Styles

An important stylesheet declaration can override a normal inline style.

Example:

1<p class=”intro” style=”color: red;”>2  Welcome.3</p>

CSS:

1.intro {2  color: blue !important;3}

The paragraph becomes blue.

Why?

The inline style is normal.

The stylesheet declaration is important.

Important declarations can override normal declarations, including normal inline styles.

Inline !important

You can also use !important inside an inline style:

1<p class=”intro” style=”color: red !important;”>2  Welcome.3</p>

CSS:

1.intro {2  color: blue !important;3}

The paragraph becomes red.

Both declarations are important.

The inline declaration has very high specificity.

So the inline important declaration wins.

For normal website styling, avoid inline !important.

It is difficult to override and usually makes CSS harder to maintain.

Why !important Exists

The !important rule exists because sometimes you need to override styles that are difficult to control.

Examples include:

1overriding third-party CSS2creating utility classes3handling emergency fixes4working with user styles5undoing overly specific CSS6dealing with inline styles from JavaScript

It is not automatically bad.

It is a tool.

The problem is using it when normal CSS structure would be better.

A Useful !important Example: Utility Classes

Some CSS systems use utility classes.

A utility class usually does one small job.

Example:

1.hidden {2  display: none !important;3}

HTML:

1<div class=”modal hidden”>2  This modal is hidden.3</div>

This can be useful because .hidden is expected to override other display rules.

Example:

1.modal {2  display: block;3}4 5.hidden {6  display: none !important;7}

The element is hidden.

In this case, !important supports the purpose of the utility class.

The class is meant to force a clear state.

Another Utility Example

CSS:

1.text-center {2  text-align: center !important;3}

HTML:

1<p class=”article-intro text-center”>2  This text is centred.3</p>

The utility class clearly says:

1Force this text to be centred.

Some utility-first systems use this pattern intentionally.

But it should be a deliberate design choice, not a habit.

A Useful !important Example: Temporary Debugging

Sometimes you may use !important while debugging.

Example:

1.card {2  outline: 3px solid red !important;3}

This can help you see which elements match a selector.

But this should usually be temporary.

After debugging, remove it.

Do not leave random important declarations in production CSS unless they serve a clear purpose.

A Useful !important Example: Third-Party Styles

Suppose a third-party widget adds styles you cannot easily change.

Example:

1.widget-title {2  color: purple;3}

Your CSS:

1.widget-title {2  color: navy !important;3}

This can override the third-party style.

This may be reasonable if you cannot control the original CSS.

However, first check whether you can override the style with better selector structure, stylesheet order, or configuration.

Use !important as a last resort, not the first option.

A Useful !important Example: Accessibility Overrides

Sometimes users need styles that override author styles.

For example, a user stylesheet might use important declarations to improve readability:

1* {2  line-height: 1.6 !important;3}

or:

1body {2  font-size: 20px !important;3}

This is one reason !important exists.

It can help user preferences override website styles.

As a website author, you should be cautious about using !important because it can make it harder for users to override your styles.

Why !important Should Be Used Carefully

The main problem with !important is that it makes CSS harder to override.

Example:

1.card {2  color: navy !important;3}

Later, you want one special card to be green:

1.card-success {2  color: green;3}

HTML:

1<div class=”card card-success”>2  Success message3</div>

The text stays navy.

Why?

The .card colour is important.

The .card-success colour is normal.

To override it, you may feel forced to write:

1.card-success {2  color: green !important;3}

Now you have two important declarations.

This can start a chain of increasingly difficult overrides.

The !important Chain Problem

A common problem looks like this:

1.card {2  color: navy !important;3}4 5.card-success {6  color: green !important;7}8 9.page .card-success {10  color: darkgreen !important;11}

Each new rule needs !important because the earlier rules used it.

This makes the stylesheet harder to reason about.

Instead of asking:

1Which selector is more specific?2Which rule comes later?

you now also need to ask:

1Which declarations are important?2Which important declaration has higher specificity?3Which important declaration comes later?

This adds complexity.

!important Can Hide CSS Design Problems

Sometimes !important is used to fix a style that is not working.

Example:

1.button {2  background-color: gray !important;3}

This may work in the moment.

But it may hide the real problem.

The real problem might be:

1the stylesheet order is wrong2the selector is too weak3another selector is too specific4the component CSS is poorly organised5the same property is being set in too many places

Before using !important, inspect the element and find out why your rule is not winning.

Better Fix: Change Source Order

Instead of this:

1.button {2  background-color: gray !important;3}

you may only need to move the rule later:

1.button {2  background-color: gray;3}

Example:

1.button {2  background-color: blue;3}4 5.button {6  background-color: gray;7}

The later rule wins when specificity is equal.

No !important is needed.

Better Fix: Use a More Specific Selector

Instead of this:

1button {2  background-color: gray !important;3}

you may need a more specific selector:

1.primary-button {2  background-color: gray;3}

HTML:

1<button class=”primary-button”>2  Save3</button>

Or:

1.card .primary-button {2  background-color: gray;3}

Use specificity deliberately.

Do not increase specificity randomly.

But a clear component selector is usually better than adding !important.

Better Fix: Use a Modifier Class

Suppose you have a base button:

1.button {2  background-color: gray;3  color: white;4}

Instead of overriding it with !important, use a modifier class:

1.button-primary {2  background-color: blue;3}

HTML:

1<button class=”button button-primary”>2  Save3</button>

The base class provides shared styling.

The modifier class changes one part.

This is usually cleaner than:

1.button {2  background-color: gray !important;3}

Better Fix: Reduce Specificity

Sometimes the problem is that an earlier selector is too specific.

Example:

1.page .main-content .card .title {2  color: navy;3}

This is hard to override.

You may be tempted to write:

1.title {2  color: green !important;3}

A better long-term fix is to simplify the original selector if possible:

1.card-title {2  color: navy;3}

Then override with a clear modifier:

1.card-title-success {2  color: green;3}

HTML:

1<h2 class=”card-title card-title-success”>2  Saved3</h2>

Lower, predictable specificity makes CSS easier to maintain.

Better Fix: Use the Cascade Intentionally

A good stylesheet often moves from general to specific:

1.button {2  background-color: gray;3  color: white;4}5 6.button-primary {7  background-color: blue;8}9 10.button-danger {11  background-color: red;12}

HTML:

1<button class=”button button-primary”>Save</button>2<button class=”button button-danger”>Delete</button>

No !important is needed.

The structure makes the intended overrides clear.

!important and the Cascade

The cascade is the browser’s system for deciding which declaration wins.

A simplified order is:

1importance2specificity3source order

This means:

1important declarations beat normal declarations2more specific selectors beat less specific selectors when importance is equal3later rules beat earlier rules when importance and specificity are equal

This is simplified, but it explains many everyday CSS conflicts.

Important vs Normal Declarations

Example:

1.box {2  color: red !important;3}4 5.box {6  color: blue;7}

The result is red.

The important declaration wins over the normal declaration.

Important vs Important Declarations

Example:

1.box {2  color: red !important;3}4 5.box.special {6  color: blue !important;7}

HTML:

1<div class=”box special”>2  Text3</div>

The result is blue.

Both declarations are important.

.box.special is more specific than .box.

So blue wins.

Important with Equal Specificity

Example:

1.box {2  color: red !important;3}4 5.box {6  color: blue !important;7}

The result is blue.

Both declarations are important.

Both selectors have the same specificity.

The later rule wins.

!important and Inheritance

!important can also affect inherited values, but direct styles still matter.

Example:

1.parent {2  color: green !important;3}4 5.child {6  color: blue;7}

HTML:

1<div class=”parent”>2  <p class=”child”>This text is blue.</p>3</div>

The child text is blue.

This may seem surprising.

The parent has an important colour.

But the parent rule applies directly to the parent, not directly to the child.

The child has its own direct colour declaration.

A direct value on the child can beat an inherited value from the parent.

Important Inherited Values

Now remove the child’s direct colour:

1.parent {2  color: green !important;3}

HTML:

1<div class=”parent”>2  <p>This text inherits green.</p>3</div>

The paragraph inherits green.

The parent’s final colour is green.

The child inherits that final value.

But the child is not receiving the parent selector’s specificity.

It is just inheriting the computed value.

Important Parent vs Direct Child Rule

Example:

1#theme {2  color: green !important;3}4 5p {6  color: blue;7}

HTML:

1<div id=”theme”>2  <p>This paragraph is blue.</p>3</div>

The paragraph is blue.

The ID selector with !important styles the parent.

The p selector styles the paragraph directly.

The direct paragraph rule wins over the inherited colour.

This is a key point:

1!important on a parent does not automatically beat direct styling on a child.

!important and Custom Properties

CSS custom properties are variables.

Example:

1:root {2  –brand-color: blue;3}

You can mark a custom property declaration as important:

1:root {2  –brand-color: blue !important;3}

But the !important affects the custom property declaration itself in the cascade.

It does not become part of the custom property value.

Example:

1:root {2  –brand-color: blue !important;3}4 5.button {6  color: var(–brand-color);7}

The button colour uses the custom property value.

The important flag helped decide which --brand-color declaration won.

It does not make color: var(--brand-color); automatically important.

If you want the color declaration itself to be important, you would write:

1.button {2  color: var(–brand-color) !important;3}

Use this carefully.

!important and CSS Variables Example

CSS:

1:root {2  –button-color: blue;3}4 5.theme {6  –button-color: green !important;7}8 9.button {10  color: var(–button-color);11}

HTML:

1<div class=”theme”>2  <button class=”button”>Save</button>3</div>

The button uses green.

Why?

The important custom property declaration helps --button-color become green inside .theme.

But the button’s color declaration is still normal.

The value is green, but the color declaration is not important.

!important and Shorthand Properties

!important can be used with shorthand properties.

Example:

1.card {2  margin: 0 !important;3}

This makes all margin sides important:

1margin-top2margin-right3margin-bottom4margin-left

So this later rule will not override the top margin:

1.card {2  margin-top: 2rem;3}

The top margin stays 0.

Why?

The earlier shorthand made the margin values important.

To override it, you would need another important declaration:

1.card {2  margin-top: 2rem !important;3}

This is another reason to use !important carefully.

It can make future changes harder.

!important with Longhand Properties

Example:

1.card {2  margin: 0 !important;3}4 5.card.featured {6  margin-top: 2rem !important;7}

HTML:

1<div class=”card featured”>2  Featured card3</div>

The top margin becomes 2rem.

Both declarations are important.

The longhand margin-top declaration directly sets the top margin.

The selector .card.featured is more specific than .card.

So the top margin override wins.

!important and Media Queries

Important declarations can appear inside media queries.

Example:

1.sidebar {2  display: block;3}4 5@media (max-width: 700px) {6  .sidebar {7    display: none !important;8  }9}

When the viewport is 700px wide or smaller, the sidebar is hidden.

The important declaration applies only when the media query condition is true.

If the media query condition is false, that rule does not apply.

Media Query Example Without !important

Often, you do not need !important in media queries.

Example:

1.sidebar {2  display: block;3}4 5@media (max-width: 700px) {6  .sidebar {7    display: none;8  }9}

This works because the media query rule comes later and has the same specificity.

Use !important in media queries only when a normal rule cannot override the existing style.

!important and Animations

CSS animations and transitions have special cascade behaviour.

For beginner CSS, the main thing to know is this:

1!important is part of the cascade, but CSS has a few advanced cascade rules for animations, transitions, origins, and layers.

You do not need to master all of that immediately.

For everyday CSS, focus on this:

1important beats normal2important vs important uses specificity and source order

That will explain most practical cases.

!important and CSS Layers

CSS cascade layers are an advanced feature.

They let you organise styles into named layers.

Example:

1@layer base {2  button {3    color: black;4  }5}6 7@layer components {8  button {9    color: blue;10  }11}

!important interacts with layers in special ways.

For a beginner, the main lesson is:

1Do not use !important as a replacement for understanding the cascade.

If you are using cascade layers, learn how layers affect priority before adding !important.

For most basic CSS, you can avoid this topic until later.

When !important Is Usually a Bad Sign

!important is often a warning sign when it appears in normal component CSS.

Example:

1.card-title {2  color: navy !important;3}

Ask:

1Why does this need to be important?2What rule is it trying to override?3Can the CSS be reorganised?4Can the selector be improved?5Can the earlier rule be made less specific?6Can a modifier class solve this?

Sometimes !important is still the right choice.

But you should understand why you need it.

When !important Can Be Reasonable

!important can be reasonable when the class or rule is meant to force a state.

Examples:

1.is-hidden {2  display: none !important;3}

1.visually-hidden {2  position: absolute !important;3  width: 1px !important;4  height: 1px !important;5  overflow: hidden !important;6}

1.no-scroll {2  overflow: hidden !important;3}

These are state or utility rules.

They are often expected to override normal component styles.

Even then, use them consistently.

Hidden Utility Example

CSS:

1.modal {2  display: block;3}4 5.is-hidden {6  display: none !important;7}

HTML:

1<div class=”modal is-hidden”>2  Modal content3</div>

The modal is hidden.

This is a clear use case.

The class name says the element is hidden.

The important declaration enforces that state.

Avoid Using !important for Everything

This is not a good pattern:

1h1 {2  font-size: 3rem !important;3}4 5p {6  color: #333333 !important;7}8 9button {10  background-color: blue !important;11}12 13.card {14  padding: 2rem !important;15}

This makes almost every style difficult to override.

If everything is important, then nothing feels simple.

You will eventually need more important rules to override earlier important rules.

This is not a sustainable way to write CSS.

A Better Pattern

Better:

1body {2  color: #333333;3  font-family: Arial, sans-serif;4}5 6h1 {7  font-size: 3rem;8}9 10.card {11  padding: 2rem;12}13 14.button {15  background-color: blue;16}

Then use modifier classes where needed:

1.button-danger {2  background-color: red;3}

HTML:

1<button class=”button button-danger”>2  Delete3</button>

This is easier to understand.

Debug Before Adding !important

When a style does not apply, do not immediately add !important.

First, inspect the element.

Ask:

1Does my selector match the element?2Is another rule setting the same property?3Is the other rule more specific?4Does the other rule come later?5Is the other rule important?6Is the style coming from inline CSS?7Is the style coming from a media query?8Is the style coming from a third-party stylesheet?

Browser developer tools can show crossed-out declarations.

A crossed-out declaration means another declaration is winning.

Find the winning declaration before deciding what to do.

Debugging Example

CSS:

1.button {2  background-color: blue;3}4 5.card .button {6  background-color: gray;7}

HTML:

1<div class=”card”>2  <button class=”button”>Save</button>3</div>

You might write:

1.button {2  background-color: blue !important;3}

But the real issue is specificity.

.card .button is more specific than .button.

A cleaner fix might be:

1.card .button {2  background-color: blue;3}

or a modifier:

1.button-primary {2  background-color: blue;3}

HTML:

1<button class=”button button-primary”>Save</button>

Use Comments When !important Is Necessary

If you use !important, it can help to explain why.

Example:

1/* Overrides third-party widget inline styles */2.support-widget {3  z-index: 9999 !important;4}

or:

1/* Utility class must override component display rules */2.is-hidden {3  display: none !important;4}

A comment helps your future self and other developers understand that the important declaration is intentional.

!important and Maintainability

Maintainable CSS is predictable.

You should be able to answer:

1Where is this style coming from?2Why is this rule winning?3How do I override it safely?

Too many important declarations make those questions harder.

They create exceptions to the normal cascade.

Good CSS usually uses:

1clear naming2low-to-moderate specificity3consistent source order4component structure5modifier classes6limited utility classes

Use !important only when it supports that structure.

A Practical Component Example

HTML:

1<div class=”alert alert-success”>2  Your profile was updated.3</div>

CSS:

1.alert {2  padding: 1rem;3  border-radius: 8px;4  color: #222222;5  background-color: #eeeeee;6}7 8.alert-success {9  color: #065f46;10  background-color: #d1fae5;11}

No !important is needed.

The base .alert class gives shared styles.

The .alert-success class changes colour and background.

This is clean and predictable.

The Same Example with Poor !important Use

CSS:

1.alert {2  padding: 1rem !important;3  border-radius: 8px !important;4  color: #222222 !important;5  background-color: #eeeeee !important;6}7 8.alert-success {9  color: #065f46;10  background-color: #d1fae5;11}

The success alert does not get its success colour or background.

Why?

The base alert styles are important.

You would need this:

1.alert-success {2  color: #065f46 !important;3  background-color: #d1fae5 !important;4}

Now the CSS is more difficult than it needs to be.

Avoid important declarations in base component styles unless there is a strong reason.

!important and State Classes

State classes are sometimes a better place for !important.

Example:

1.dropdown {2  display: block;3}4 5.is-hidden {6  display: none !important;7}

The .is-hidden class represents a strong state.

It means:

1This element should not be displayed.

This can justify !important.

But if every state class uses !important, review your CSS structure.

You may be relying on forced overrides too often.

!important and JavaScript

JavaScript sometimes adds inline styles.

Example:

1<div class=”panel” style=”display: block;”>2  Panel content3</div>

A stylesheet rule like this may not override the inline style:

1.panel {2  display: none;3}

But this can:

1.panel {2  display: none !important;3}

This can be useful if a script adds inline styles that you need to override.

However, it may be better to change the JavaScript if you control it.

For example, JavaScript can add a class instead:

1<div class=”panel is-hidden”>2  Panel content3</div>

CSS:

1.is-hidden {2  display: none;3}

This is usually cleaner than fighting inline styles.

Avoid Fighting Yourself

Many !important problems happen when your own CSS fights itself.

Example:

1.sidebar .button {2  color: white;3}4 5.button {6  color: black !important;7}

This makes it unclear which rule should control the button.

A better structure is:

1.button {2  color: black;3}4 5.sidebar .button {6  color: white;7}

The base style comes first.

The context-specific style comes later or uses a clearer selector.

No important flag is needed.

A Simple Decision Guide

Before using !important, ask:

1Am I overriding a third-party style I cannot change?2Am I creating a utility class that must force a state?3Am I temporarily debugging?4Am I overriding inline styles I cannot control?5Is there a cleaner fix with source order, specificity, or a modifier class?

If the cleaner fix is available, use that first.

If not, !important may be reasonable.

Use !important Sparingly

A good rule of thumb:

1Use !important only when the override is intentional, limited, and difficult to solve cleanly another way.

Avoid using it just because a style is not applying.

That usually means the cascade needs to be inspected.

Full Example: Normal Override

HTML:

1<button class=”button button-primary”>2  Save3</button>

CSS:

1.button {2  background-color: gray;3  color: white;4}5 6.button-primary {7  background-color: blue;8}

The button background becomes blue.

No !important is needed.

The CSS is clear.

The base class sets the default.

The modifier class changes the variant.

Full Example: Important Override

HTML:

1<button class=”button button-primary”>2  Save3</button>

CSS:

1.button {2  background-color: gray !important;3  color: white;4}5 6.button-primary {7  background-color: blue;8}

The button background stays gray.

The important base style blocks the modifier.

To fix it, you may write:

1.button-primary {2  background-color: blue !important;3}

This works, but it makes the CSS harder to maintain.

A better fix is to remove !important from the base .button rule.

Full Example: Reasonable Important Utility

HTML:

1<div class=”notification is-hidden”>2  New message received.3</div>

CSS:

1.notification {2  display: block;3  padding: 1rem;4  background-color: #eff6ff;5}6 7.is-hidden {8  display: none !important;9}

The notification is hidden.

This is reasonable because .is-hidden is a utility/state class.

Its purpose is to force the element to be hidden.

Full Example: Third-Party Override

Suppose a third-party widget has this style:

1.chat-widget {2  bottom: 20px;3}

You cannot edit that file.

Your site needs the widget higher:

1.chat-widget {2  bottom: 80px !important;3}

This may be reasonable.

But add a comment:

1/* Override third-party widget position */2.chat-widget {3  bottom: 80px !important;4}

This explains why the important flag exists.

Full Example: Inline Style Override

HTML:

1<div class=”banner” style=”display: block;”>2  Sale ends today.3</div>

CSS:

1.banner {2  display: none !important;3}

The banner is hidden.

The important stylesheet rule can override the normal inline style.

This can be useful when inline styles are generated by code you cannot change.

If you control the HTML or JavaScript, prefer a class-based approach.

Best Practices for !important

Use !important only when there is a clear reason.

Avoid using it in base component styles.

Avoid using it to fix problems you have not debugged.

Prefer source order, specificity, and clear class names first.

Use modifier classes for component variations.

Use utility classes carefully when they are meant to force a state.

Add comments when an important declaration exists to override third-party or inline styles.

Do not use !important on every declaration.

Remember that important declarations can still be overridden by other important declarations.

Remember that specificity and source order still matter when declarations are equally important.

Be careful with shorthand properties marked important.

Avoid inline !important unless there is no better option.

Quick Summary

!important makes a CSS declaration more important in the cascade.

It is written after the value and before the semicolon:

1color: red !important;

Important declarations beat normal declarations.

If two declarations are both important, specificity still matters.

If two important declarations have equal specificity, the later one usually wins.

!important works on individual declarations, not entire rules.

It can override normal inline styles.

It can be useful for utility classes, third-party overrides, emergency fixes, and certain state classes.

It should be used carefully because it makes CSS harder to override.

Too much !important can create a chain where every future override also needs !important.

Before using it, check whether source order, specificity, better selectors, or modifier classes would solve the problem more cleanly.

Use !important as a deliberate tool, not as a default fix.