Global Reset

Bei search-this.com bin ich auf einen diskusionswürdigen Artikel gestoßen, welcher ein Problem mit dem globalen Selector * in CSS anspricht. Die meisten Browser haben Standardwerte für margin bzw. padding bei Block-Elemente wie body, html, p, h1-6 usw. definiert. Diese Werte sind zwischen den verschiedenen Browsern unterschiedlich. Um dieses Problem einfach aus der Welt zu schaffen, habe ich bisher den *-Selektor verwendet, um zu Beginn alles auf eine einheitliche Ausgangsposition zu setzen:

* {
  margin: 0;
  padding: 0;
}

Doch was geschieht hier genau? Der Browser arbeitet die CSS-Angaben von oben nach unten ab. Beim *-Selektor werden alle Knoten im (X)HTML angesprungen und das Element, welches eines der angegebenen Formatierungs-Attribute besitzt, wird geändert (bzw. die Stilangabe geändert).

Vermutlich wird weiter unten im CSS-File folgendes auftauchen:

h1 {
  margin-left: 10px;
  padding: 5px 0 10px 0;
  /* ... */
}

Somit werden die Werte margin und padding für h1 zwei mal gesetzt. Zudem werden beim Verarbeiten des globalen Selektors margin und padding für Elemente gesetzt, die sowieso schon auf 0 stehen oder die nicht gebraucht werden. Das bedeutet für den Browser mehr Arbeit, sprich und das Rendern größerer Seiten dauert länger.

Was also tun? Gerade bei umfangreicheren Designs ist es zu umständlich, für jedes verwendete Element diese Werte zu setzen. Von programmtechnischer Sicht ist dies eigentlich zu vermeiden und widerspricht dem DRY-Prinzip. Hier gilt es abzuwägen was wichtiger ist. Die Kommentare im Artikel sind zu dieser Frage auch recht aufschlussreich.