Importance of CSS Specificity and its best practices

Using CSS is one of the most crucial components of building any web application. A common problem that many web developers may face is that CSS styles do not apply to specific elements when more than one style property is applied.The purpose of this blog post is to discuss CSS specificity (a set of rules defining how css styles are applied to specific elements), which will help us to understand and solve the issue of CSS styles getting overridden in the browser.

What is CSS specificity?

In web development it is common to write many CSS rules for one element, but sometimes a few of them may not get applied because the browser decides which rule will be applied to the element, which is called specificity.

What rule will take precedence over the others, and why? The one with the most specificity will win. If two or more rules have the same specificity, the one that appears last will prevail.

How to calculate specificity?

In CSS rule declarations specificity is determined by how many types of selectors are in the matching selector. If multiple declarations have the same specificity, then the last CSS rule declaration is evaluated and applied.

Here are the different ways to calculate CSS specificity
1. Using selector types
2. Using decimal number system

Selector types:
The following list of selector types increases by specificity:
1. Type selector (e.g., h1) and pseudo-elements (e.g., ::before).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
3. ID selectors (e.g., #example).

Specificity not get effected by universal selectors(*), combinators(+,~," ",||,>) , negation pseudo-class(:not()) but selectors inside :not() effect the specificity.

Decimal system:
In this case, we have 4 slots by which we can understand the specificity, such as: 0 0 0 0 is on the left has more importance than on the right. Like it works with numbers in the decimal system: 1 0 0 0 is higher than 0 1 0 0.

Slot 1
The first slot, rightmost one with least importance. Below is the example of an element selector which increases the value of the slot accordingly based on the number of selectors. Specificity is increased by adding more selectors and other rules

Slot 2
The second slot is incremented by:

1. Class selectors
2. pseudo-class selector
3. attribute selector

Whenever a rule meets the one of above mentioned selectors, it will increase the value of the second column from right. Slot 2 can be the combination of slot 1 selectors and if we need to increase the value of slot 2 we can repeat the same class.
Example:

Example with combination of slot 2 and slot 1

Example to increase specificity by repeating the class selector

Slot 3
This slot has most important thing which can affect the specificity in CSS that is ID selector, which can be declared by using # with respective ID names.

Slot 4
This slot is affected by inline styles. Any inline style will have precedence over any rule defined in an external CSS file, or inside the style tag in the page header.

Impact on specificity while using !important

Technically, !important doesn't have any effect on specificity, but when it's used in a selector, it will override the other CSS selectors and apply !important.  CSS selector with more specificity in the list of selectors, the more likely it will be applied on the element. It's always bad practice to use !important as it breaks the natural CSS cascading in stylesheets and is difficult to debug.

Points we follow while using !important:
1. We always try to use specificity first before using  !important.
2. We always use !important only in page specific if needed which should not effect other external css.
3. We avoid to use !important while writing common and public code.

CSS specificity rule

Having created any web application the browser parses the HTML, creates the DOM, and parses the CSS. Once the CSS has been parsed and sorted, it determines which CSS to apply to which element based on the rules and the position of the element selector.

Below are the order of specificity rule which has precedence respectively:
1) Inline style: Inline style has highest priority among all.
2) Id Selector: It has second highest priority.
3) Classes, pseudo-classes and attributes: These selectors has lowest priority.

Apart from this we have few more which has priority based on css imports :

1. Internal style
2. External CSS
3. Inline style

These CSS files will inherit properties written in them once we include them in our application. We will be able to apply internal CSS that overrides the external CSS properties and the same thing will happen in the case of inline CSS. Inline CSS overrides the external and internal CSS. If we add many classes with many properties, yet we only have one ID selector, then that ID selector will have a higher specificity weight than others.

Example:- In the example below, we have one external.css file with an identical class to what is mentioned in the internal css file. Therefore, when it is rendered in the browser, internal css will override external css .div-color class because of specificity rules, and inline css will override internal css .div-color class because inline css has a higher priority than internal and internal has more than external.

How browser decides "Specificity" ?

A browser determines which CSS will be applied to selectors based on its weight. Among the selectors which determine specificity are as follows:

1. Id selector (#IdNam)
2. Classes, attributes and pseudo-classes
3. Elements and pseudo-elements
4. Universal (*)  selector

Each of the above mentioned selectors has their own weight to get priorities to apply on element.

Id selector has highest priority because of  unique nature of the ID attribute definition.

We have two classes with one ID selector here it will apply font-size:12px and font-weight:500 due to the specificity rule as ID selector has highest priority after inline CSS.

Tips to remember when dealing with specificity issues

1. The universal selector * has low or no specificity.
2. If we are writing css with !important then this property will be get applied even it has low priority in rules
3. Selectors used inside pseudo classes like :not() with highest specificity will be the specificity.
4. Child or sibling selectors (>, ~, +) add no specificity.

Conclusion

CSS specificity is crucial to developing any web application since it will allow us to write more efficient CSS code. Without interfering with other classes or selectors. We have leveraged Specificity extensively (as outlined above) to manage/avoid CSS styles from getting overridden in the Browser.

Join us

We are always looking out for top engineering talent across all roles for our tech team. If challenging problems that drive big impact enthral you, do reach out to us at careers.india@halodoc.com

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek and many more. We recently closed our Series B round and In total have raised USD$100million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.