Deel 6: The power of design

The cascade

Wat is the cascade?

CSS

🌊 Cascading Style Sheets

= verwijst het naar de manier waarop de browser beslist welke styling wordt toegepast wanneer er meerdere CSS regels zijn die hetzelfde element proberen te stylen.

Cascading Style sheets

Vaak voel je door ervaring al aan welke styling wordt toegepast. Welke kleur krijgt de tekst hier?

<div class="box">
  <p class="intro">
    Dit is een beetje text
  </p>
</div>

div {
  color: green;
}

.box {
  color: purple;
}

p {
  color: red;
}

.intro {
  color: blue;
}

Cascading Style sheets

Toch kan het soms complex worden. Er zijn een aantal regels die bepalen welke styling genomen wordt.

Dit hangt af van:

  • Origin en Importance
  • Specificity (specificiteit)
  • Volgorde

Origin & importance

Origin

Verwijst naar de bron waar een CSS-regel vandaan komt:

  • Styling van de browser (User Agent Stylesheet):
    Grote titels, blauw a-element, bullets...
  • Eigen stylesheet (Author stylesheet)
    Eigen css-files, inline css...​

​​🤔 Welke CSS "wint"?

Origin

/* User agent styles (browser defaults) - laagste prioriteit */
p { margin: 16px 0; }

/* Author styles (jouw CSS) - normale prioriteit */
p { margin: 20px 0; }

/* User styles (gebruiker instellingen in browser) - hoge prioriteit */
p { margin: 24px 0; }

Soms past een gebruiker de instellingen van de browser aan (bv teksten groter te zetten, hoger contrast).
Deze styling override jouw css-styling

Importance

Wanneer je in css !important toevoegd, overschrijft dit alle andere styles.

<p class="intro">
  Dit is een beejte text
</p>


.intro {
  font-size: 2rem !important; 
}

⚠️ Bad practice

Gebruik !important zo weinig mogelijk. Het overschrijft instelling van de gebruiker en zorgt ervoor dat het waterval systeem van styles ingewikkeld wordt

Samenvatting

/* User agent styles (browser defaults) - laagste prioriteit */
p { margin: 16px 0; }

/* Author styles (jouw CSS) - normale prioriteit */
p { margin: 20px 0; }

/* User styles (gebruiker instellingen in browser) - hoge prioriteit */
p { margin: 24px 0; }

/* !important author styles - hoogste prioriteit */
p { margin: 10px 0 !important; }

Specificity

Specificity

De styling die "wint" hangt ook af van hoe specifiek je een element aanspreekt, dit heeft te maken met:

  • Inheritance (overerving)​
  • Selectoren

Inheritance

<div class="parent">
  <p class="child"></p>
</div>
.parent {
  color: red;
}

/* Dit element zal de kleur overerven */
.child {
  color: inherit;
}

Child-elementen erven automatisch bepaalde styling van hun parent elementen over

Inheritance

.parent {
  color: red;
}

.child {
  color: blue;
}

Wanneer je het child-element een andere styling geeft, overschrijft dit de styling van de parent

<div class="parent">
  <p class="child"></p>
</div>

Inheritance

h1 {
  font-family: Arial;
} 

h2 {
  font-family: Arial;
} 

h3 {
  font-family: Arial;
} 

p {
  font-family: Arial;
}

Je kan handig gebruik maken van inheritance om dubbele code te vermijden

body {
  font-family: Arial;
}

👎

👍

Inheritance

Enkel de properties die met text-styling te maken hebben worden doorgegeven aan child-elementen:


color, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, text-shadow, word break

Alle andere properties niet, denk aan border, padding, margin...

Selectoren

Ook selectoren bepalen hoe "specifiek" je een element aanspreekt. Hoe specifieker de selector, hoe hoger de kans dat de styling wordt toegepast.

<p class="intro">
  Dit is een beetje text
</p>

p {
  color: red;
}

.intro {
  color: blue;
}

Selectoren

Om te bepalen welke styling wordt toegepast, kunnen we kijken naar "het gewicht" van een selector. Dat doen we door de selectoren in te delen in "rangen"

  • Type selectors
  • Class selectors
  • Attribute selectors
  • ID-selectors

0 - 0 - 1

0 - 1 - 0

0 - 1 - 0

1 - 0 - 0

Selectoren

p {
  color: blue;
}

Type selector: laagste rang

0 - 0 - 1

Selectoren

.text {
  color: blue;
}

Class selector: middelste rang

0 - 1 - 0

a[target="_blank"] {
  color: blue;
}

Attribute selector: middelste rang

0 - 1 - 0

Selectoren

#my-text {
  color: blue;
}

Id selector: hoogste rang

1 - 0 - 0

Selectoren

0 - 1 - 0

De selector met de hoogste rang wint

<p class="intro">
  Dit is een beetje text
</p>

p {
  color: red;
}

.intro {
  color: blue;
}

0 - 0 - 1

Selectoren

Soms kunnen selectoren complex worden. Dan tel je hoeveel selectoren van elke rang aanwezig zijn en neem je het hoogste getal.

<div class="box">
  <p class="intro">
 	 Dit is een beetje text
  </p>
</div>

0 - 1 - 0

.intro {
  color: red;
}

p.intro {
  color: blue;
}

.box .intro {
  color: green;
}

0 - 1 - 1

0 - 2 - 0

Selectoren

<div class="box" id="box">
  <p class="intro" id="intro">
 	 Dit is een beetje text
  </p>
</div>

1 - 0 - 0

0 - 2 - 2

0 - 2 - 0

.box .intro {
  color: green;
}

div.box p.intro {
  color: blue;
}

#intro {
  color: red;
}

Wat is de specificiteit?

Volgorde van properties

Volgorde van properties

Als twee CSS declaraties dezelfde property aanpassen (en de specificiteit gelijk is), dan wint de laatst gedefinieerde.

p {
  color: red;
  color: blue;
  color: green;
}

Dit geldt voor dezelfde property binnen één selector

Volgorde van properties

p {
  color: green;
}

...

p {
  color: orange;
}

Of voor dezelfde property in twee gelijke selectoren

Volgorde van properties

Of voor dezelfde property in twee verschillende stylesheets!

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
...
body {
  margin: 0;
}

reset.css

body {
  margin: 1rem;
}

main.css

<div class="parent">
  <p class="child"></p>
</div>
.parent {
  color: red;
}

.child {
  color: blue;
  color: purple;
}

🤔
Welke kleur heeft de paragraaf?

🤔
Welke kleur heeft de paragraaf?

<div class="parent">
  <p class="child"></p>
</div>
.child {
  color: blue;
  color: purple;
} 

.parent {
  color: red;
}

Wat weegt het meest?

Wat weegt het meest

1. Rechtstreekse aanspreking
Eerst kijkt een browser naar de css die rechtstreeks aanspreekt op de elementen. Die wint altijd.

2. Specificity

Als er op vlak van rechtstreekse aanspreking geen onderscheid is tussen properties, is specificity de volgende doorslaggevende factor.

 

 

Wat weegt het meest

3. Volgorde

Als ook de specificity hetzelfde is bij meerdere properties op het zelfde rechtstreeks aangesproken element, wordt er naar de volgorde gekeken. De laatste wint.

4. Overerving

 

 

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
div {
  color: red
}

🤔 Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
div {
  border: 1px solid blue;
}

Wat weegt het meest

🤔 Heeft p een border?

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

div {
  color: red;
}

Wat weegt het meest

🤔 Welke kleur heeft p?

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

div.my-div {
  color: red;
}

Wat weegt het meest

🤔 Welke kleur heeft p?

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

.my-text {
  color: red;
}

Wat weegt het meest

🤔 Welke kleur heeft p?

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p.my-text {
  color: blue;
}

div.my-text {
  color: red;
}

Wat weegt het meest

🤔 Welke kleur heeft p?

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p#my-text {
  color: blue;
}

div .my-text {
  color: red;
}

Wat weegt het meest

🤔 Welke kleur heeft p?

Simplifying complexity

Simplifying complexity

Specificiteit kan complex zijn, zeker in combinatie met overerving.

Om dit een pak meer simpel te maken zijn hier enkele gebruikelijke good practices. 

Simplifying complexity

Gebruik enkel de volgende selectors in CSS: 

  • Type selectors
  • Class selectors
  • Attribute selectors

Gebruik dus geen ID selectors in CSS, die kan je onmogelijk overschrijven met classes.

Simplifying complexity

Gebruik een logische volgorde van hoe je de selectors na elkaar schrijft in CSS. Volg de flow van je HTML.

div {...}

body {...}

p {...}

html {...}
html {...}

body {...}

div {...}

p {...}

👎

👍

Simplifying complexity

Definieer eerst type selectors, en daarna de class en attribute selectors

a {...}

.my-class {...}

section {...}
a {...}

section {...}

.my-class {...}

👎

👍

Simplifying complexity

Definieer eerst type selectors, en daarna de class en attribute selectors

body {...}
div {...}
p {...}
a {...}

.my-class {...}

.my-other-class {...}

👍

13. The Cascade

By Lecturer GDM

13. The Cascade

Element overerving, volgorde van declaraties, selector specificiteit.

  • 137

More from Lecturer GDM