title: HTML ID and CLASS naming best practices
body: <p>Hello and thank you for taking your time to read my question. My question pertains to html best practices. </p>
  
  <p>I have a html skeleton that looks like this..</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Template&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
          &lt;/header&gt;
          &lt;main&gt;
          &lt;/main&gt;
          &lt;footer&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and I want to start adding HTML elements that I will later select these elements by ID and CLASS within CSS and JavaScript. My "Best Practice" related questions are..</p>
  
  <ul>
  <li>Do ID and CLASS have identical naming conventions?</li>
  <li>What is the minimum and maximum recommended ID and CLASS attribute length?   </li>
  <li>Why do websites like facebook name there ID and CLASS atributes with random
  numbers and letters?</li>
  <li>Should I use camelcase? </li>
  <li>Should I use underscores or numbers? </li>
  <li>Should I shorten words with abbreviates like "Detail" becomes "Det" when naming?</li>
  <li>Should I give ever elements that is a child of body a ID and CLASS atribute?</li>
  <li>Would I ever need to specify an ID or CLASS attribute for a element within the HEAD element?</li>
  </ul>