CSS optimalisatie: Complexe stijlen

Complexe stijlen bewerken

Bij verkeerd gebruik van CSS kunnen complexe stijlen worden gebruikt die veel vergen van de browser van de de bezoeker. Het voorbeeld is simpel en fictioneel, maar het zal zeker niet de eerste keer zijn dat er op deze manier gebruik wordt gemaakt van stijlen.

HTML:
<body class="index">
	<div class="header">
		<div class="rightbox">
			<ul>
				<li>listitem</li>
				<li>listitem</li>
			</ul>
		</div>
	</div>
</div>
CSS:
.index .header .rightbox ul li{float:left;}

In het voorbeeld gaat de CSS 5 lagen diep, dit is te complex en het kost de browser tijd om al deze klassen na te lopen. Er zijn meerdere oplossingen. De meest eenvoudige is, dan is deze nog maar 3 lagen diep:

CSS:
.rightbox ul li{float:left;}

Maar nog sneller is:

HTML:
<body class="index">
	<div class="header">
		<div class="rightbox">
			<ul id="headerlist">
				<li>listitem</li>
				<li>listitem</li>
			</ul>
		</div>
	</div>
</div>
CSS:
#headerlist li{float:left;}