Deepdive into CSS Specificity Algorithm

Definition of Specificity

It is a set of rules where it is defined which property (like color, etc.) applies first and which would be last. This Algo. is responsible for in which condition which property will be applied to which component (like hover, mobile view).

How Specificity is Calculated

Inline styling

By using inline styling, we can also style a component or a tag. It is not part of the selector, which is why I put it before the “Selectors Weight Categories” section, although it carries the highest weight (1-0-0-0) among all.

*Specificity is calculated on basis of selectors weight

Selectors Weight Categories

ID Selectors: An ID selector means a tag can be accessed by its ID. and it carries the highest weight (1-0-0) compared to the other selectors. #example

Class Selectors: An class selector means a tag can be accessed by its class. and it carries the 2nd highest weight (0-1-0) compared to the other selectors .example . And includes attribute selectors like [type="radio"] and[lang|="fr"] and pseudo-classes, such as:hover :nth-of-type(3n) and:required For each class, attribute selector, or pseudo-class in a matching selector.

Element Selectors: An tag selector can be accessed by its name h1 p table and includes pseudo-elements ::before. It carries weight (0-0-1)

Examples of Specificity in Action

Let’s break it down with some examples:

In this case:

The p selector has a specificity of 1.
.container p has a specificity of 11.
#main p has a specificity of 101.

Result: The paragraph will be red because #main p has the highest specificity.

Common Pitfalls and How to Avoid Them

Overusing !important
While !important can override specificity, it’s often considered bad practice because it makes your code harder to maintain. Use it sparingly.

Copy

Copy
```
  p {
    color: black !important;
  }
```
In this case, the !important rule will win, regardless of specificity.
Conflicting Rules
If your styles are getting overridden, check for higher-specificity selectors or inline styles that might be the culprit.
Using Too Many IDs
IDs have very high specificity, so overusing them can lead to a cascade of specificity wars in your CSS. Favor classes for reusable styles.

How to Keep Specificity in Check

Stick to Classes
Classes provide enough specificity for most use cases and are more reusable than IDs.
Keep Your Selectors Simple
Avoid overly complex selectors like div ul li:first-child a. They’re hard to read, and you might end up unintentionally increasing specificity.
Organize Your Stylesheets
Write your CSS in a way that minimizes conflicts. Group related styles and use a consistent naming convention.

Wrapping It Up

CSS specificity might seem intimidating at first, but once you understand how it works, you’ll gain better control over your styles. Think of it as learning the rules of the road for CSS—once you’ve got them down, you’ll navigate your projects with ease.

Here’s a quick recap:

Specificity is calculated based on the type of selector.
Inline styles > IDs > Classes > Elements.
Avoid !important unless absolutely necessary.

Deepdive into CSS Specificity Algorithm

Comments

More from this blog

Stop Committing Secrets: Automatically Generate .env.example with gen-envex

How Does a Browser Know Where a Website Lives?

Why Version Control Exists: The "Pendrive Problem" and the Chaos of final_v2_REAL_final 📁🔥

Stop Losing Your Code: A Beginner’s Guide to Git Magic

🌐 Understanding the Backbone of the Internet: IP Addresses, Domain Names System & Routing

Definition of Specificity

How Specificity is Calculated

Inline styling

Selectors Weight Categories

Examples of Specificity in Action

Common Pitfalls and How to Avoid Them

How to Keep Specificity in Check

Wrapping It Up

Command Palette

Comments

More from this blog

Definition of Specificity

How Specificity is Calculated

Inline styling

Selectors Weight Categories

Examples of Specificity in Action

Common Pitfalls and How to Avoid Them

How to Keep Specificity in Check

Wrapping It Up