Mathieu S. and Michael V.
The account used for the slides of @work1
CSS architectuur
@Work 1
Main
Sub
Placeholder
Placeholder
Placeholder
- Placeholder
Vraag
Placeholder
Oefening @Campus
Placeholder
Placeholder
Placeholder
This is some codeOpdracht @home
Opdracht A: placeholder
Punten: ??
Deadline: ??
What?
CSS architectuur
What?
CSS architecture is organisatie, volgorde and modulariteit van je CSS.
What?
Je hebt ongelofelijk veel manieren om je eigen CSS te gaan organiseren.
In deze les zal je een pragmatische aanpak zien waarop je kan verder bouwen.
Componenten
CSS architectuur
Componenten
Je kan met CSS architectuur aan de slag gaan als je het concept mee bent van je HTML/CSS/JS onder te verdelen in componenten.
Zie slides: Webdesign - Componenten
Volgorde
CSS architectuur
Volgorde
Bij CSS specificity hebben we gezien dat de volgorde van CSS een impact heeft.
Volgorde
Dit hebben we al gezien: (ref)
Volgorde
Alsook dit:
* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}
.my-component {...}
.my-component__header {...}
.my-component__main {...}
.my-other-component {...}
.my-other-component__header {...}Alle elementen
Alle type elementen
Meer specifieke type elementen
component A theming
component B theming
* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}
.my-component {...}
.my-component__header {...}
.my-component__main {...}
.my-other-component {...}
.my-other-component__header {...}General theming
Component
theming
* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}
.my-component {...}
.my-component__header {...}
.my-component__main {...}
.my-other-component {...}
.my-other-component__header {...}main.css
my-component.css
my-other-component.css
Volgorde
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="my-component.css">
<link rel="stylesheet" href="my-other-component.css">
</head>
<body>...</body>
</html>Volgorde
* {...}
html {...}
body {...}
p {...}
a {...}
a[target="_blank"] {...}
.header {...}
.footer {...}
.menu {...}
.my-component {...}
.my-component__header {...}
.my-component__main {...}
elements.css
my-component.css
main.css
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="elements.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="component-A.css">
<link rel="stylesheet" href="component-B.css">
</head>
<body>...</body>
</html>Volgorde
Maar wat moeten we doen als we een pagina.html hebben die niet het component B heeft maar wel component C?
Volgorde
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="elements.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="component-A.css">
<link rel="stylesheet" href="component-C.css">
</head>
<body>...</body>
</html>Volgorde
Je hebt nu
- niet alle CSS nodig op iedere pagina.
- overzichtelijke component-gegroepeerde CSS
- een duidelijke structuur welke CSS, waar staat.
Meer weten?
CSS architectuur
Meer weten?
Wil je graag meer te weten komen naast deze les over de gedemonstreerde logica?
De suggestie is gebaseerd op een combinatie van BEM, ITCSS, SMACSS en de progressive rendering methodes van browsers.
@Work1 - CSS architectuur
By Mathieu S. and Michael V.
@Work1 - CSS architectuur
CSS Architectuur: CSS verdelen over verschillende bestanden & CSS variables.
