Decreased CSS Specificity with new HTML5 elements

Question

Earlier to apply styles to a sidebar we would write the following

<div id="sidebar">
<p>Some text...</p>
</div>

and the corresponding CSS to set the color to Red would be like

#sidebar p{
color: Red;
}

The CSS Specificity here is {0,1,0,1}

In HTML5 We have the aside element that could be used as

<aside>
<p>Some text..</p>
</aside>

and the CSS to set the color to Red would be

aside p{
color:Red;
}

By using the HTML5 element the CSS Specificity is {0,0,0,2}

Using HTML5 elements improve the semantics. But HTML5 elements reduce the CSS Specificity. Provided that the target browsers support all HTML5 elements which among the 2 approaches would be appropriate?

Answer 1

Provided that the target browsers support all HTML5 elements which among the 2 approaches would be appropriate?

The latter approach using HTML5 elements would be the best approach, however there are two things to consider regarding rule specificity:

1. HTML5 is better at reducing clashes based on just element name alone as there are more of them, and when used correctly. Consider:

   <div class="section">words...<div class="aside"><p>an aside</p>
   

   versus

   <section>words...<aside><p>an aside</p>
   

   The latter is better as the semantics of the document are within the tags themselves.

2. When you are reusing a structure, its fine to add id and class attributes to make structure clearer.

   <section>words...<aside><p>an aside</p>
   <section>copyright...<aside><p>year of copyright</p>
   

   versus

   <section class="article">words...<aside><p>an aside</p>
   <section class="copyright">copyright...<aside><p>year of copyright</p>
   

   Here, the class on the latter adds context and reduces rule ambiguity.

So ultimately the answer to your question is use HTML5 elements intelligently with classes where appropriate.