# CSS Specificity

Specificity is how browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
**Specificity only applies when the same element is targeted by multiple declarations.**

---

## Selector Hierarchy

1. inline
2. id
3. class
4. html tag

---

<style>
    #introduction{ color: red;}
    .message{ color: green;}
    h1{ color: blue;}
</style>
<h1 class="message" id="introduction">
    Hello!
</h1>

---

<style>
    #introduction{ color: red;}
    .message{ color: green;}
    h1{ color: blue;}
</style>
<h1 class="message" id="introduction" style="color: pink;">
    Hello!
</h1>

---

**The !important exception**

<style>
    #introduction{ color: red;}
    .message{ color: green;}
    h1{ color: blue !important;}
</style>
<h1 class="message" id="introduction" style="color: pink;">
    Hello!
</h1>

---

## Specificity problems

An overly-specific selector can make your css very difficult to maintain.

---

<style>
    #content table{ color: red;}
</style>
<section id="content">
    <table>Table 1</table>
</section>

---

<style>
    #content table{ color: red;}
    .my-new-table{color:blue}
</style>
<section id="content">
    <table>Table 1 red</table>
    <table class="my-new-table">Table 2 blue</table>
</section>

---

<style>
    #content table{ color: red;}
    #content .my-new-table{color:blue}
</style>
<section id="content">
    <table>Table 1 red</table>
    <table class="my-new-table">Table 2 blue</table>
</section>

---

If we scale this on a bigger application with different section it become very difficult and the only way to deal with it is to get progressively more specific—the notorious specificity wars we looked at above.

---

**Overly-specific selector can:**

- Limit your ability to extend and manipulate a codebase;
- Interrupt and undo CSS’ cascading, inheriting nature;
- Cause avoidable verbosity in your project;
- Prevent things from working as expected when moved into different environments;
- **Lead to serious developer frustration.**

---

One of the single, simplest tips for an easier life when writing CSS—particularly at any reasonable scale—is to keep always try and keep specificity as low as possible at all times.

**Simple changes to the way we work, but are not limited to, can avoid a lot of specificity problems**

---

**Try to not using IDs in your CSS**

It is just not worth introducing the risk.

---

**Try to not nesting selectors**

.content .content--paragraph .title{
    color: orange;
}

This type of specificity entirely avoidable—we caused this problem ourselves—we have a selector that is literally triple the specificity it needs to be. We used 300% of the specificity actually required.
**As a rule, if a selector will work without it being nested then do not nest it.**

**Solutions**
- BEM-like Naming

.content{...}
.content--paragraph{...}
.content--paragraph-title{color: orange;}

---

**Try to not use ! important**

!important The word !important sends shivers down the spines of almost all front-end developers. !important is a direct manifestation of problems with specificity; it is a way of cheating your way out of specificity wars, but usually comes at a heavy price. It is often viewed as a last resort—a desperate, defeated stab at patching over the symptoms of a much bigger problem with your code.

---

- Use qualifying classes;

---

**Usefull links**

- [Specificity | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
- [CSS Specificity | W3schools](https://www.w3schools.com/css/css_specificity.asp)
- [CSS Specificity | cssguidelin](https://cssguidelin.es/#specificity)

---