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

Hi, 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

<code>

<section class="container products"> <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 company name.</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 -->

</code>

'''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) <code>

<section class="container products width-60 letter-spacing-2px"> <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 company name.</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 --> </code>

'''CSS

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