Workflow: architectuur

Een goede organisatie van je CSS heeft een aantal voordelen:

• overzichtelijk
• specificiteit makkelijk in de hand houden
• betere samenwerking met je collega's

Volgorde

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

* { ... }
html { ... }
body { ... }
div { ... }
a { ... }
a[target="_blank"] { ... }

.my-component { ... }
.my-component__element { ... }

.my-other-component { ... }
.my-other-component__element { ... }

Meerdere CSS files

Je kan een stap verder gaan en ook meerdere CSS files gebruiken. We doen dit reeds met de reset.css. Zorg dat je de elementen van je stijlen goed structureerd en laad alle stylesheets in de correcte volgorde in je HTML.

<!-- Start met je reset -->
<link rel="stylesheet" href="reset.css">

<!-- De basisstijlen: fonts, elementen -->
<link rel="stylesheet" href="main.css">

<!-- Losse componenten: 1 component per file -->
<link rel="stylesheet" href="my-component.css">
<link rel="stylesheet" href="my-other-component.css">