Slide 1

Slide 1 text

Matija Marohnić CSS Specificity

Slide 2

Slide 2 text

A little bit about me • frontend developer and blogger • obsessed with generating static sites • DX evangelist • open source • automate all the things • follow me on Twitter: @silvenon

Slide 3

Slide 3 text

MDN Web docs “Specificity is the means by which browsers decide which property values are the most relevant to an element and, therefore, will be applied.”

Slide 4

Slide 4 text

X Y Z type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 5

Slide 5 text

0 0 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 6

Slide 6 text

0 1 2 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 7

Slide 7 text

1 2 2 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 8

Slide 8 text

0 54 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors A trick to bump specificity

Slide 9

Slide 9 text

0 1 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 10

Slide 10 text

• these don’t affect specificity: • universal selector (*) • combinators (+, >, ~, etc.) • negation pseudo-class (:not())

Slide 11

Slide 11 text

0 0 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 12

Slide 12 text

0 1 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors

Slide 13

Slide 13 text

1 0 0 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors inline style

Slide 14

Slide 14 text

1 0 0 0 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors inline style !important

Slide 15

Slide 15 text

When to use !important • as little as possible • basically only to override third-party styles

Slide 16

Slide 16 text

An alternative to !important Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Slide 17

Slide 17 text

The best way to increase specificity is…

Slide 18

Slide 18 text

• the lower the specificity, the easier it is to manage • plus, this way we keep repetition out of HTML …source order.

Slide 19

Slide 19 text

The color of the paragraph is: 1. red 2. green 3. blue 4. fuchsia Quiz!

Slide 20

Slide 20 text

Happy styling!