3min Devops

How to: [CSS] Kleinere bestanden maken

Algemeen

Benodigdheden

  • Basis van css

Werkwijze

Het is bijna altijd wel mogelijk om meerde regels code in één lijn te krijgen. Bijvoorbeeld het volgende stuk code:

PHP Code

1
2
3
4
5
6
7
8
9
 
div#naam{
	padding-top:10px;
	padding-right:5px;
	padding-bottom:7px;
	padding-left:4px;
	border-width:1px;
	border-color:#000000;
	border-style:solid;
	}

Dit kunnen we veel korter opschrijven door middel van een ‘CSS Shorthand’:

PHP Code

1
2
3
4
 
div#naam{
	padding:10px 5px 7px 4px;
	border:1px solid #000;
	}

Kleurcodes

Zoals je ziet heb ik de kleurcode ook verkort met drie tekens. Dit kun je bij alle #112233 kleurcodes doen. Dus #112233 wordt dan #123. Kleurcodes die uit één teken zijn opgebouwd kunnen ook worden afgekort. Dus #ffffff word #fff, en #000000 word #000.

Commentaar

Als je commentaar gebruikt in je css bestand houd dit dan zo kort mogelijk. Korte beschrijvingen zeggen vaak al genoeg. En als je verder nog dingen moet uitleggen (aan een klant bijvoorbeeld) dan kun je dit beter in een tekstbestand meeleveren.

Zo kom je dit vaak tegen in de css-code van websites:

PHP Code

1
 
/* -------------- header -------------- */

Al doet het volgende precies het zelfde:

PHP Code

1
 
/* header */

ID’s & Classes

Wat je ook vaak tegen komt is hele lange id- en classnamen. Dit neemt veel ruimte in in je css en in je html. Je hebt bijvoorbeeld een span in een h2, die vervolgens weer in je header staat. Nou kun je die natuurlijk een naam geven als "Header_H2_Span". De naam geeft duidelijk aan wat het is, maar is wel wat aan de langen kant. Je kunt hem ook "hd_h_span" noemen. Wat al een stuk korter is. Dit soort dingen kun je ook heel simpel met css oplossen.

Als je bijvoorbeeld dit stukje html hebt:

PHP Code

1
2
3
4
5
 
<div id="header">
	<h2>
    	<span>Techzine.nl</span>
    </h2>
</div>

Dan kun je de style van de span heel simpel aanpassen met de volgende css:

PHP Code

1
2
 
#header h2 span{
	}

In css kun je aangeven als er een element in een ander element zit. Een soort van treeview. Je zou het dus zo kunnen zien:

– #header
– – h2
– – – span

In css word dat dus ‘#header h2 span’. Op deze manier hoeven we dus niet elk element een naam te geven.

Meerdere elementen met de zelfde attributen

Als je op veel elementen de zelfde styling gebruik (bijvoorbeeld geen margin op ul’s en ol’s) dan kun je dit heel makkelijk oplossen met css.

PHP Code

1
2
3
4
5
6
7
8
9
 
ul{
	margin:0;
	padding:0;
	}
 
ol{
	margin:0;
	padding:0;
	}

Deze code doet precies het zelfde als:

PHP Code

1
2
3
4
 
ul, ol{
	margin:0;
	padding:0;
	}

Je kunt in css meerdere elementen dus makkelijk de zelfde styling geven door ze te scheiden met een komma.

0px/0em/0%

0 is 0 zou je zeggen, of dit nou 0 meter, 0 cm of 0 pixels is. Daarom kun je in css ook de meeteenheid weg laten.

PHP Code

1
2
3
4
 
attribuut{
	margin:0px;
	padding:0px;
	}

Doet dus precies het zelfde als:

PHP Code

1
2
3
4
 
attribuut{
	margin:0;
	padding:0;
	}

Met deze methodes kun je je css-bestand veel kleiner krijgen. Veel succes met het devven!