Sprint 2

The client website

Week 3

Maandag 7 oktober 2024

Code conventies

1. Geef je HTML ademruimte

Deze convention had ik eigenlijk al standaard toegepast in mijn HTML, zie hier mijn index.html: https://github.com/julia-stevens/the-client-website/blob/main/index.html

2. Schrijf je CSS selectors in dezelfde volgorde als de HTML

Wat betreft de CSS had ik een andere volgorde gehanteerd. Ik was namelijk begonnen met het coderen van de programma cards, daarna de header en daarna de media player die onderaan de pagina staat. De volgorde van mijn CSS selectors kwam dus niet overeen met de volgorde van de HTML. Hierop heb ik feedback gekregen van een tweedejaars mentor, en heb ik een issue ontvangen: https://github.com/julia-stevens/the-client-website/issues/33

Ik heb de volgorde aangepast, zodat deze overeenkomt met CSS, zie hier de commit: #5c79b795ea6631c19b71a3e36193afacfd464430

3. Nest je media queries

Op basis van deze convention heb ik mijn media queries genest, zie hier een aantal voorbeelden:

• https://github.com/julia-stevens/the-client-website/blob/4f27108414dd89c7f36877c6bfbde2b9069b44f6/styles/styles.css#L102-L103
• https://github.com/julia-stevens/the-client-website/blob/4f27108414dd89c7f36877c6bfbde2b9069b44f6/styles/styles.css#L199-L211
• https://github.com/julia-stevens/the-client-website/blob/4f27108414dd89c7f36877c6bfbde2b9069b44f6/styles/styles.css#L362-L381

Schrijf nog 2 punten waarmee je de leesbaarheid van je HTML en CSS kunt verbeteren

1. Het helpt om comments te schrijven om stukken code uit te leggen/ toe te lichten. Bovendien kun je hiermee duiden over welk onderdeel je aanspreekt in bv CSS. Dit heb ik bijvoorbeeld hier gedaan: https://github.com/julia-stevens/the-client-website/blob/4f27108414dd89c7f36877c6bfbde2b9069b44f6/styles/styles.css#L383-L395

2. Om de leesbaarheid te verbeteren helpt het ook om duidelijke class/id namen te schrijven. Het is handig om hier een beschrijvende titel aan te geven, zodat je direct kunt zien welk onderdeel je aanspreekt.

Welke conventies neem ik mee naar mijn eigen code?

1. Ik neem de volgorde van CSS mee. Dit is een makkelijke manier om meer overzicht te houden over je code.
2. Ik vind het nesten van media queries ook bijdragen aan de overzichtelijkheid van de code en dit wil ik dus ook meenemen.
3. Ik hield altijd al rekening met het inspringen van regels en ruimte geven aan code, dus dit blijf ik ook gewoon doen.