Warum schreibt man h1.main { color: red; } überhaupt hin, wenn es keine Auswirkung hat?

Das macht man doch überhaupt nicht. Die Möglichkeit stammt aus den Urzeiten von CSS und wird heute nicht mehr benötigt. In dem selfHTML-Beispiel geht nur darum die Auswirkungen zu demonstrieren.

Bei eigenem CSS sollte !important vollkommen überflüssig sein.

Bei Änderungen an fremden CSS (oder wenn man beim eigenen CSS doch den Überblick verloren hat) kann heute mit den Inspektoren der Browser das Problem-CSS aufgespürt und dann direkt bearbeitet werden.

Die !important-Möglichkeit wurde früher meist von Webseitenerstellern verwendet, die mit ihrem eigenen CSS vollkommen überfordert waren. Folge war dann häufig, das ihr eigenes CSS im Laufe kurzer Zeit mit !important so überfüllt war, das gar nichts mehr ging.

!important funktioniert heute zwar noch, ist aber überflüssig.