For your first example, I would argue the following is better. You reduce repetition of the class name and keep the semantic value of having a list

    <ul class="social-links">
        <li><a href="#" class="twitter">Twitter</a></li>
        <li><a href="#" class="facebook">Facebook</a></li>
        <li><a href="#" class="dribble">Dribbble</a></li>
        <li><a href="#" class="gplus">Google+</a></li>
    </ul>

You would need to have a scary size document to reap the benefit of reducing your element nesting level by that little.

Also if you don't want to commit to having a h1 as always being the header, using a class for the styling would be beneficial.

    <h1 class="header">header</h1>

Or depending on your situation you might want to use a header tag.