Opmaak van een website wordt geregeld door middel van een stylesheet. Een stylesheet voor een complete website kan erg uitgebreid en onoverzichtelijk worden. Door middel van shorthand properties kunnen we onze CSS verkorten.

De voordelen om je CSS te optimaliseren zijn aanzienlijk:

• minder typwerk, dus tijdwinst
• kortere stylesheet, dus kortere ladingstijd
• oogt professioneler

Algemene optimalisaties

Naast de shorthand properties hebben we ook nog een aantal andere optimalisaties die we kunnen toepassen om onze CSS te verkorten.

Kleurcodes

Een kleurcode bestaat uit een spoorwegteken en 3 groepjes van 2 karakters. Wanneer deze 2 karakters van de groepjes dezelfde zijn, mag je deze verkorten tot 1 karakter.

color: #000000
color: #ff00ee
color: #660000

wordt:

color: #000
color: #f0e
color: #600

0-waarden

Als je aan een eigenschap de waarde 0 (nul) geeft, is het niet nodig om er nog em, px, ... bij te zetten.

Class toekennen

div.codevoorbeeld { }

wordt

.codevoorbeeld { }

Het geef je ook meteen de vrijheid om de class ook aan een andere HTML-tag (selector) te koppelen indien van toepassing.

Groeperen

Kenmerken en waarden die dezelfde zijn bij verschillende selectors kunnen eerst gegroepeerd worden en enkel de afwijkende kenmerken en waarden moeten apart gedeclareerd worden.

h1 { color: blue; font-weight: bold; }
h2 { color: blue; font-weight: bold; }
h3 { color: blue; font-weight: bold; font-style: italic; }

wordt:

h1, h2, h3, h4 { color: blue; font-weight: bold; }
h3 { font-style: italic; }