Is it better practice to apply more classes to markup or apply more selectors for rules in CSS? Examples of this included

so I am confused on whether or not it is "better practice" to apply more classes in your markup or to apply more selectors for rules.

For example, is it better to have your markup and css like this (applying more selectors to rules and less classes to markup)

HTML

        <h2>Just a few of our products...</h2>
        <ul>
            <div>
                <li><img src="../Images/1.jpg"></li>
                <li><img src="../Images/2.jpg"></li>
                <li><img src="../Images/3.jpg"></li>
                <li><img src="../Images/4.jpg"></li>
                <li><img src="../Images/5.jpg"></li>
                <li><img src="../Images/6.jpg"></li>
                <li><img src="../Images/7.jpg"></li>
                <li><img src="../Images/8.jpg"></li>
                <li><img src="../Images/9.jpg"></li>
            </div>
        </ul>
    </section>
        <footer> <!-- Entire Footer -->
            <ul>
            <span>&copy Ener-G Foods Inc.</span>
                <li><a href="#"><img src="../Images/fb-icon.png"></a></li>
                <li><a href="#"><img src="../Images/insta-icon.gif"></a></li>
                <li><a href="#"><img src="../Images/pin-icon.gif"></a></li>
                <li><a href="#"><img src="../Images/twitter_icon.png"></a></li>
            </ul>
        </footer> <!-- Entire Footer -->

'''CSS

nav, .about h4, .products h2, footer { text-align: center; } footer, .products, .about { width: 60%; } nav li, footer li { display: inline; } nav li, .container { letter-spacing: 2px; }'''

Or like this (applying more classes to markup and less selectors to css)

        <h2 class="align-text">Just a few of our products...</h2>
        <ul>
            <div>
                <li><img src="../Images/1.jpg"></li>
                <li><img src="../Images/2.jpg"></li>
                <li><img src="../Images/3.jpg"></li>
                <li><img src="../Images/4.jpg"></li>
                <li><img src="../Images/5.jpg"></li>
                <li><img src="../Images/6.jpg"></li>
                <li><img src="../Images/7.jpg"></li>
                <li><img src="../Images/8.jpg"></li>
                <li><img src="../Images/9.jpg"></li>
            </div>
        </ul>
    </section>
        <footer class="align-text width-60"> <!-- Entire Footer -->
            <ul class="display-inline">
            <span>&copy Ener-G Foods Inc.</span>
                <li><a href="#"><img src="../Images/fb-icon.png"></a></li>
                <li><a href="#"><img src="../Images/insta-icon.gif"></a></li>
                <li><a href="#"><img src="../Images/pin-icon.gif"></a></li>
                <li><a href="#"><img src="../Images/twitter_icon.png"></a></li>
            </ul>
        </footer> <!-- Entire Footer -->

'''CSS

.align-text { text-align: center; } .width-60 { width: 60%; } .display-inline { display: inline; } .letter-space-2px { letter-spacing: 2px; }'''