Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / CSS / identische Eigenschaften / Selektoren gruppieren

Mit CSS die übertragene Datenmenge reduzieren

Wiederholungen von CSS-Deklarationen vermeiden

Selektoren mit identischen CSS-Eigenschaften gruppieren

Sich wiederholende CSS-Eigenschaften für CSS-Selektoren sind nicht notwendig und können als kommaseparierte Auflistung der jeweiligen CSS-Selektoren vereinfacht und als reduzierte Schreibweise zusammengefasst werden.

Beispiel mit CSS-Eigenschaften für Überschriften

h1 {
	color: blue;
        font-size: 140%;
	margin-bottom: 40px;
}
h2 {
	color: blue;
	font-size: 130%;
	margin-bottom: 40px;
}
h3 {
	color: blue;
	font-size: 120%;
	margin-bottom: 30px;
}
h4 {
	color: blue;
	font-size: 110%;
	margin-bottom: 30px;
}
h5 {
	color: blue;
	font-size: 100%;
	font-style: italic;
	margin-bottom: 20px;
}
h6 {
	color: blue;
	font-size: 100%;
	font-style: italic;
	font-weihgt: normal;
	margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6 {
	color: blue;
}
h1, h2 {
	margin-bottom: 40px;
}
h1 {
        font-size: 140%;
}
h2 {
	font-size: 130%;
}
h3, h4 {
	margin-bottom: 30px;
}
h3 {
	font-size: 120%;
}
h4 {
	font-size: 110%;
}
h5, h6 {
	font-size: 100%;
	font-style: italic;
}
h5 {
	margin-bottom: 20px;
}
h6 {
	font-weihgt: normal;
	margin-bottom: 10px;
}
h1,h2,h3,h4,h5,h6{color:blue}
h1,h2{margin:0 0 40px}
h1{font-size:140%}
h2{font-size:130%}
h3,h4{margin:0 0 30px}
h3{font-size:120%}
h4{font-size:110%}
h5,h6{font-size:100%;font-style:italic}
h5{margin:0 0 20px}
h6{margin:0 0 10px;font-weihgt:400}

Zusammenfassung: Durch die Verwendung von Gruppierungen der CSS-Selektoren kann die Ladezeit von Webseiten durch die verringerte Dateigröße optimiert werden.