Skip to content

Commit

Permalink
Add some bits to code conventions
Browse files Browse the repository at this point in the history
  • Loading branch information
Krijn Hoetmer committed Oct 7, 2024
1 parent ec7fe71 commit cbc2b71
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions docs/code-conventies.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ je dit consequent doorvoert, wordt je latere CSS hier ook beter van.

Zorg dat je CSS bestand de volgorde en structuur van de HTML volgt. Hierdoor
wordt het makkelijker om je werk terug te vinden, en aanpassingen te maken.
Maak slim gebruik van _inheritance_ binnen CSS, en zet je code op van generiek
naar specifieker.

💡 Je kunt in CSS ook selectors _nesten_ om meer overzicht te houden (en minder
te typen). Laat ook hierbij de structuur van je HTML terugkomen.
Expand All @@ -98,19 +100,23 @@ nav {
}

.intro {
font-family: sans-serif;
text-align: center;
}

footer {
font-family: sans-serif;
font-size: smaller;
}

a.button {
font-family: sans-serif;
padding: .5em;
border: 1px solid;
}

nav ul {
font-family: sans-serif;
list-style: none;
}

Expand All @@ -123,6 +129,7 @@ body {

```css
body {
font-family: sans-serif;
line-height: 1.5;
}

Expand Down Expand Up @@ -150,7 +157,7 @@ footer {
### Nest je media queries

Zorg dat je per onderdeel (_component_) op je pagina afzonderlijk nadenkt over
hoe deze _responsive_ werkt. Door je _Mobile First_ media queries te _nesten_
hoe deze _responsive_ werkt. Door je _Mobile First_ media queries te _nesten_,
is het makkelijker om met verschillende formaten breakpoints te werken, en hou
je meer overzicht. Ga je een onderdeel veranderen (of verwijderen), dan heb je
op één plek ook alle code bij elkaar.
Expand Down Expand Up @@ -210,7 +217,15 @@ footer {

### Opdracht met je tafel

...
Bekijk met je tafel en mentor de HTML van één persoon en bespreek wat er
verbeterd kan worden qua ademruimte en inspringen, zoals hierboven beschreven.

Bespreek vervolgens samen de CSS van een andere student, en loop hierin de
volgorde van de selectors door. Wat kan beter? Kunnen er selectoren genest
worden? Kunnen sommige properties algemener neergezet worden?

Bekijk daarna van een andere student, die al media queries heeft gebruikt, of
deze handiger genest kunnen worden. Bespreek ook de waardes in de breakpoints.

### Individuele opdracht

Expand Down

0 comments on commit cbc2b71

Please sign in to comment.