I don't understand why people write CSS this way...

[M A V I C]

Here's two examples:

Example #1

h1 { font-size: 20px; }

h2 { font-size: 16px; }

h3 { font-size: 12px; }

h4 { font-size: 11px; }



h1, h2, h3, h4 {

	color: #000;

	line-height: 1.1;

	font-family: Arial, Verdana, sans-serif;

	font-weight: bold;

	text-transform: lowercase;

	letter-spacing: 1px;

}

Example #2

h1 { font-size: 20px;

	color: #000;

	line-height: 1.1;

	font-family: Arial, Verdana, sans-serif;

	font-weight: bold;

	text-transform: lowercase;

	letter-spacing: 1px;

}

h2 { font-size: 16px;

	color: #000;

	line-height: 1.1;

	font-family: Arial, Verdana, sans-serif;

	font-weight: bold;

	text-transform: lowercase;

	letter-spacing: 1px;

}

h3 { font-size: 12px;

	color: #000;

	line-height: 1.1;

	font-family: Arial, Verdana, sans-serif;

	font-weight: bold;

	text-transform: lowercase;

	letter-spacing: 1px;

}

h4 { font-size: 11px;

	color: #000;

	line-height: 1.1;

	font-family: Arial, Verdana, sans-serif;

	font-weight: bold;

	text-transform: lowercase;

	letter-spacing: 1px;

}

The only difference between each class is the font size. Example #1 is more simple and utilizes less lines of code. However, Example #2 is much easier to fine tune each class, easier to debug, easier for new people to come in and edit the code and easier to control each piece of content.

I also can't stand em's because they're relative to what's around them. So if I decide to change whatever they're nested in, it also changes that object size.

Is there some reason why so many people seem to like Example #1?