title: Develop in HTML... without classes/ID
body: <p>I've just found out the pseudo-classes utilisation (:nth-child etc...).</p>
  
  <p>I have a question in my mind about this : The use of those pseudo-classes, which permit the suppression of the classes in the HTML code, is a benefit ? In relation with SEO, performance, W3C etc...</p>
  
  <p>Here is an example (just a test, so no responsive and the image aren't loading, but we don't care) : <a href="https://codepen.io/anon/pen/XNjQEM" rel="nofollow noreferrer">https://codepen.io/anon/pen/XNjQEM</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content="Exercice Facultatif"&gt;
      &lt;meta name="author" content="Nathan Cheval"&gt;
      &lt;title&gt;Exercice facultatif&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt; 
  
      &lt;!-- START HEADER --&gt;
      &lt;header&gt;
          &lt;div&gt;
              &lt;img src="imgs/logo.png"&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Acceuil&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Activités&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;!-- END HEADER --&gt;
  
      &lt;!-- START CONTENT --&gt;
      &lt;div&gt;
          &lt;section&gt;
              &lt;article&gt;
                  &lt;div&gt;
                      &lt;figure&gt;
                          &lt;img src="imgs/mtp.png" alt="Lac de Montpellier"&gt;
                          &lt;figcaption&gt;
                              Lac de Montpellier
                          &lt;/figcaption&gt;
                      &lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;h1&gt;Les lacs d’Occitanie&lt;/h1&gt;
                      &lt;p&gt;
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.&lt;br&gt;&lt;br&gt;
                       Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. &lt;br&gt;&lt;br&gt;
                       Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.&lt;br&gt;&lt;br&gt;
                      &lt;/p&gt;
                      &lt;a href="#"&gt;Lire la suite...&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
              &lt;hr&gt;
              &lt;article&gt;
                  &lt;div&gt;
                      &lt;figure&gt;
                          &lt;img src="imgs/mtp.png" alt="Lac de Montpellier"&gt;
                          &lt;figcaption&gt;
                              Lac de Gergovie
                          &lt;/figcaption&gt;
                      &lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;h1&gt;Les lacs d’Auvergne&lt;/h1&gt;
                      &lt;p&gt;
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.&lt;br&gt;&lt;br&gt;
                       Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. &lt;br&gt;&lt;br&gt;
                       Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.&lt;br&gt;&lt;br&gt;
                      &lt;/p&gt;
                      &lt;a href="#"&gt;Lire la suite...&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;!-- START CONTENT --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for your help clarifying this subject</p>