Tips voor het schrijven van goede CSS

Inhoudstabel:

1. DRY (Don't Repeat Yourself)
2. Naamgeving van CSS-selectors
3. Gebruik van CSS-klassen om duplicatie te voorkomen
4. Consistentie behouden in CSS
5. Gebruik van externe stylesheets
6. Vermijd het gebruik van de !important tag
7. Houd CSS compact
8. Schrijf commentaren waar nodig
9. Gebruik van meerdere CSS-bestanden

1. DRY

DRY staat voor "Don't Repeat Yourself" (Herhaal jezelf niet). Dit is een algemeen principe voor softwareontwikkeling en kan worden toegepast in elke programmeertaal, maar ook in CSS. Zoals we uit de naam kunnen opmaken, is DRY erop gericht om herhaling zoveel mogelijk te voorkomen of te verminderen.
We kunnen bijvoorbeeld 3 CSS-klassen maken voor 3 knoppen:

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Of we kunnen het DRY-principe gebruiken door de gemeenschappelijke regels één keer in een extra klasse te schrijven en de verschillende regels elk in andere klassen:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

2. Naamgeving

De naamgeving van CSS-selectors is een ander belangrijk punt voor het schrijven van betere CSS.
Als je bijvoorbeeld classes gaat gebruiken, moet de naam van een selector zelfbeschrijvend en leesbaar zijn.

/* BAD NAMING */

.p {
  /* Rules */
}

.myFirstForm {
  /* Rules */
}

Normaal gesproken is

een HTML-tag en staat het voor paragraaf. Hierboven kunnen we niet echt begrijpen wat klasse p is. Je moet ook namen als “myFirstForm” vermijden.
Gebruik in plaats daarvan declaratieve namen (eventueel ook gescheiden door een streepje voor meerdere namen):

/* GOOD NAMING */

.article-paragraph {
  /* Rules */
}

.contact-form {
  /* Rules */
}

_Ter Info: _Dingen een naam geven in programmeren is niet zo eenvoudig, maar er zijn verschillende naamgevingsconventies die je kunt gebruiken in je project. BEM (block element modifier) is er daar één van.

3. Gebruik CSS classen om duplicatie te bestrijden

Je kan perfect meerdere klassen aan een element toe te voegen. Sterker nog, je kan bijvoorbeeld veel gebruikte stijl eigenschappen gaan extraheren in wat men ‘utility-classes’ noemt.
Laten we een gedetailleerd begrip krijgen met een eenvoudig voorbeeld.
Stel dat je een section "info-box" hebt waar je je text wil laten centreren en een border wil geven. Hier zie je een voorbeeld van zo’n stijlregel.

.info-box {
  grid-area: info-box;
  padding:  1rem;
  margin-right: .5rem;
  text-align: center;
  border: 2px solid #aa4400;
}

Je hebt misschien nog andere elementen die ook gecentreerde text nodig hebben en nog andere die ook dezelfde border moeten krijgen.
In dat geval kan je bv. een utility class .text-centered in je CSS code maken die je text alignment op center gaat zetten. Dit kan je ook doen voor je .bordered, merk op dat je meerdere (relevante) eigenschappen in zo'n utility class kan zetten.

.info-box {
  grid-area: info-box;
  padding:  1rem;
  margin-right: .5rem;
}

.text-centered {
  text-align: center;
}

.bordered {
  border: 2px solid #aa4400;
  padding : .5rem;
  border-radius: .5rem;
}

<section class="info-box text-centered bordered">{.....}</section>
<section class="other-box bordered">{.....}</section>

Opgelet!:

Vermijd het overvloedig gebruik van dit soort classes. Het mag niet zo zijn dat je voor elke stijl eigenschap een aparte class gaat aanmaken.
Het doel is veel gebruikte stijlregels die op veel van jouw elementen toepasbaar zijn te gaan extraheren in hun eigen class om zo code duplicatie te vermijden en gaandeweg flexibeler aanpassingen te kunnen maken.

4. Consistentie behouden

Ongeacht de manier waarop je je CSS code in HTML schrijft, of de manier waarop je de css-eigenschappen toevoegt, het is belangrijk om consistentie in de code te behouden.
Veel ontwerpers geven er de voorkeur aan om hun eigenschappen alfabetisch te ordenen, terwijl veel anderen een logische benadering gebruiken, zoals het ordenen van dingen op type of uitlijning.
Het is helemaal aan jou hoe je het wilt doen, maar het komt erop neer dat je je aan de volgorde houdt, zodat het later makkelijk wordt om dingen terug te vinden.

5. Gebruik externe stylesheets

Je hebt algemeen 3 manieren om css in te laden:

• Inline CSS. Hiermee kun je specifieke HTML elementen stijlen.
• Externe CSS. Hierbij wordt een bestand zoals een stylesheet gebruikt om de site in zijn geheel op te maken.
• Interne CSS. Hiermee kun je een hele pagina stijlen in plaats van specifieke elementen. (met de <style> tag in je <head>)

Door gebruik te maken van inline styles wordt het "SoC" principe geschonden en zal je nagenoeg altijd eindigen met slecht onderhoudbare code.

Separation of Concerns (SoC):

Volgens het principe van Separation of Concerns oftewel “scheiding van belangen” moeten ontwerp (CSS), inhoud (HTML) en logica (JavaScript) worden gescheiden.

<section>
   <!-- DO NOT USE INLINE STYLES -->
   <h2 style="font-size: 40px">Some Title</h2>
   <p>some paragraph</p>
</section>

voorbeeld van inline CSS

Daarbij komt ook nog dat als je inline styles gaat gebruiken, je heel moeilijk stijlen kan gaan updaten via css zonder gebruik van !important (zie puntje 6).

6. Vermijd de !important tag

Oké, dus je CSS werkte niet zoals het hoorde te werken en je hebt het laten werken door de important tag toe te passen:

!important

Wat gebeurt er nu? De !important tag heeft de hoogste specificiteit van alle CSS selectors.
Je zegt in feite tegen de browser om die specifieke regel altijd en onder alle omstandigheden toe te passen met de !important tag. Dit is niet goed omdat CSS regels kunnen verschillen van de ene selector naar de andere, van parent selector naar child.
De enige manier om een !important tag te overschrijven is door een andere important tag te gebruiken. En dit leidt tot het gebruik van steeds meer !important tags. In de nabije toekomst zal je projectcode vol staan met !important tags, wat je CSS-code veel moeilijker te onderhouden maakt. Probeer het dus niet te gebruiken.

7. Hou het compact

7.1 Gebruik Shorthand “korte” notatie

Sommige CSS-eigenschappen zoals paddings, marges, lettertypen en randen kunnen veel eenvoudiger worden geschreven met shorthand notatie. Het gebruik van shorthands helpt om het aantal regels te verminderen.
Dus zonder shorthand notatie zou een CSS class er zo uitzien:

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid;  
  border-color: black;
}

En met gebruik van shorthand notatie:

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

Je kunt hier meer informatie vinden over het gebruik van shorthand notatie voor eigenschappen en voor welke CSS eigenschappen ze kunnen worden toegepast.

7.2 Vermijd te specifieke selectors

Onbewust voegen veel ontwerpers extra selectors toe aan de CSS-code die het stylesheet opleukt. Het meest voorkomende voorbeeld van het toevoegen van een extra selector is te vinden in lijsten.

body #container .someclass ul li {....}

In het bovenstaande voorbeeld hadden we ook gewoon het volgende statement kunnen gebruiken

.someclass li {...}

Het is aan te raden om deze te vermijden, zodat we de CSS-code zo eenvoudig en schoon mogelijk kunnen houden.

7.3 Combineer elementen waar mogelijk

Het is niet altijd nodig om voor elk tekstelement op een pagina het lettertype, dezelfde kleur en de uitlijning op te sommen als ze allemaal dezelfde eigenschappen hebben.

Combineer ze in plaats daarvan in één regel:

h1, h2, h3, p {
font-family: arial,
color: #00000
}

8. Schrijf commentaren waar nodig

Normaal gesproken heeft goede code geen commentaar nodig, omdat het al duidelijk en zelfbeschrijvend is. Maar in sommige gevallen kan het nodig zijn om extra uitleg te schrijven.

/* Your Comments */
.example-class {
  /* your rules */
}

Dus als je het gevoel hebt dat sommige delen van de code onduidelijk zijn, wees dan niet bang om commentaar toe te voegen (zonder te overdrijven).

9. Meerdere css bestanden

In plaats van één gigantisch stylesheet te maken, is het aan te raden om kleinere en meerdere stylesheets te maken, afhankelijk van de complexiteit van de grootte en het ontwerp van de site.
Ze zijn niet alleen gemakkelijker te beheren, maar ze stellen je ook in staat om bepaalde CSS weg te laten op pagina's die het niet nodig hebben.

_Sidenote: Wat dan met performance? _
Veel ontwikkelaars volgen dit patroon in de beginfase, maar hebben later de neiging om ze te combineren in één bestand, bijvoorbeeld met behulp van een css minifier. Hierdoor wordt het aantal HTTP-verzoeken teruggebracht tot één en kan het hele bestand in de cache worden opgeslagen op de computer van de gebruiker.