Update ID and class selector/attribute guidance

We now recommend avoiding unnecessary `id` attributes and prefer using class selectors for styling.

Where `id` attributes are strictly required, we recommend always including a hyphen in the value.

Author: tonyruscoe

htmlcssguide.html

@@ -371,6 +371,34 @@ <h4 id="type_Attributes" class="numbered"><code>type</code> Attributes</h4>
 &lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"&gt;&lt;/script&gt;
 </code></pre>
 
+<h4 id="id_Attributes" class="numbered"><code>id</code> Attributes</h4>
+
+<p>Avoid unnecessary <code>id</code> attributes.</p>
+
+<p>Prefer <code>class</code> attributes for styling and <code>data</code> attributes for scripting.</p>
+
+<p>Where <code>id</code> attributes are strictly required, always include a hyphen in the
+value to ensure it does not match the JavaScript identifier syntax, e.g. use
+<code>user-profile</code> rather than just <code>profile</code> or <code>userProfile</code>.</p>
+
+<p>When an element has an <code>id</code> attribute, browsers will make that available as a
+<a href="https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object">named property on the global <code>window</code> prototype</a>,
+which may cause unexpected behavior. While <code>id</code> attribute values containing a
+hyphen are still available as property names, these cannot be referenced as
+global JavaScript variables.</p>
+
+<pre><code class="language-html bad">&lt;!-- Not recommended: `window.userProfile` will resolve to reference the &lt;div&gt; node --&gt;
+&lt;div id="userProfile"&gt;&lt;/div&gt;
+</code></pre>
+
+<pre><code class="language-html good">&lt;!-- Recommended: `id` attribute is required and its value includes a hyphen --&gt;
+&lt;div aria-describedby="user-profile"&gt;
+  …
+  &lt;div id="user-profile"&gt;&lt;/div&gt;
+  …
+&lt;/div&gt;
+</code></pre>
+
 <h3 id="HTML_Formatting_Rules" class="numbered">HTML Formatting Rules</h3>
 
 <h4 id="General_Formatting" class="numbered">General Formatting</h4>
@@ -477,12 +505,12 @@ <h4 id="CSS_Validity" class="numbered">CSS Validity</h4>
 CSS code that may not have any effect and can be removed, and that ensures
 proper CSS usage.</p>
 
-<h4 id="ID_and_Class_Naming" class="numbered">ID and Class Naming</h4>
+<h4 id="ID_and_Class_Naming" class="numbered">Class Naming</h4>
 
-<p>Use meaningful or generic ID and class names.</p>
+<p>Use meaningful or generic class names.</p>
 
-<p>Instead of presentational or cryptic names, always use ID and class names that
-reflect the purpose of the element in question, or that are otherwise generic.</p>
+<p>Instead of presentational or cryptic names, always use class names that reflect
+the purpose of the element in question, or that are otherwise generic.</p>
 
 <p>Names that are specific and reflect the purpose of the element should be
 preferred as these are most understandable and the least likely to change.</p>
@@ -494,45 +522,45 @@ <h4 id="ID_and_Class_Naming" class="numbered">ID and Class Naming</h4>
 document or template changes.</p>
 
 <pre><code class="language-css bad">/* Not recommended: meaningless */
-#yee-1901 {}
+.yee-1901 {}
 
 /* Not recommended: presentational */
 .button-green {}
 .clear {}
 </code></pre>
 
 <pre><code class="language-css good">/* Recommended: specific */
-#gallery {}
-#login {}
+.gallery {}
+.login {}
 .video {}
 
 /* Recommended: generic */
 .aux {}
 .alt {}
 </code></pre>
 
-<h4 id="ID_and_Class_Name_Style" class="numbered">ID and Class Name Style</h4>
+<h4 id="ID_and_Class_Name_Style" class="numbered">Class Name Style</h4>
 
-<p>Use ID and class names that are as short as possible but as long as necessary.</p>
+<p>Use class names that are as short as possible but as long as necessary.</p>
 
-<p>Try to convey what an ID or class is about while being as brief as possible.</p>
+<p>Try to convey what a class is about while being as brief as possible.</p>
 
-<p>Using ID and class names this way contributes to acceptable levels of
-understandability and code efficiency.</p>
+<p>Using class names this way contributes to acceptable levels of understandability
+and code efficiency.</p>
 
 <pre><code class="language-css bad">/* Not recommended */
-#navigation {}
+.navigation {}
 .atr {}
 </code></pre>
 
 <pre><code class="language-css good">/* Recommended */
-#nav {}
+.nav {}
 .author {}
 </code></pre>
 
-<h4 id="ID_and_Class_Name_Delimiters" class="numbered">ID and Class Name Delimiters</h4>
+<h4 id="ID_and_Class_Name_Delimiters" class="numbered">Class Name Delimiters</h4>
 
-<p>Separate words in ID and class names by a hyphen.</p>
+<p>Separate words in class names by a hyphen.</p>
 
 <p>Do not concatenate words and abbreviations in selectors by any characters
 (including none at all) other than hyphens, in order to improve understanding
@@ -546,7 +574,7 @@ <h4 id="ID_and_Class_Name_Delimiters" class="numbered">ID and Class Name Delimit
 </code></pre>
 
 <pre><code class="language-css good">/* Recommended */
-#video-id {}
+.video-id {}
 .ads-sample {}
 </code></pre>
 
@@ -555,36 +583,52 @@ <h4 id="Prefixes" class="numbered">Prefixes</h4>
 <p>Prefix selectors with an application-specific prefix (optional).</p>
 
 <p>In large projects as well as for code that gets embedded in other projects or on
-external sites use prefixes (as namespaces) for ID and class names. Use short,
-unique identifiers followed by a dash.</p>
+external sites use prefixes (as namespaces) for class names. Use short, unique
+identifiers followed by a dash.</p>
 
 <p>Using namespaces helps preventing naming conflicts and can make maintenance
 easier, for example in search and replace operations.</p>
 
 <pre><code class="language-css good">.adw-help {} /* AdWords */
-#maia-note {} /* Maia */
+.maia-note {} /* Maia */
 </code></pre>
 
 <h4 id="Type_Selectors" class="numbered">Type Selectors</h4>
 
-<p>Avoid qualifying ID and class names with type selectors.</p>
+<p>Avoid qualifying class names with type selectors.</p>
 
 <p>Unless necessary (for example with helper classes), do not use element names in
-conjunction with IDs or classes.</p>
+conjunction with classes.</p>
 
 <p>Avoiding unnecessary ancestor selectors is useful for
 <a href="http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/">performance reasons</a>.</p>
 
 <pre><code class="language-css bad">/* Not recommended */
-ul#example {}
+ul.example {}
 div.error {}
 </code></pre>
 
 <pre><code class="language-css good">/* Recommended */
-#example {}
+.example {}
 .error {}
 </code></pre>
 
+<h4 id="ID_Selectors" class="numbered">ID Selectors</h4>
+
+<p>Avoid ID selectors.</p>
+
+<p>ID attributes are expected to be unique across an entire page, which is
+difficult to guarantee when a page contains many components worked on by many
+different engineers. Class selectors should be preferred in all situations.</p>
+
+<pre><code class="language-css bad">/* Not recommended */
+#example {}
+</code></pre>
+
+<pre><code class="language-css good">/* Recommended */
+.example {}
+</code></pre>
+
 <h4 id="Shorthand_Properties" class="numbered">Shorthand Properties</h4>
 
 <p>Use shorthand properties where possible.</p>
@@ -757,19 +801,19 @@ <h4 id="Declaration_Block_Separation" class="numbered">Declaration Block Separat
 rule.</p>
 
 <pre><code class="language-css bad">/* Not recommended: missing space */
-#video{
+.video{
   margin-top: 1em;
 }
 
 /* Not recommended: unnecessary line break */
-#video
+.video
 {
   margin-top: 1em;
 }
 </code></pre>
 
 <pre><code class="language-css good">/* Recommended */
-#video {
+.video {
   margin-top: 1em;
 }
 </code></pre>
@@ -848,11 +892,11 @@ <h4 id="Section_Comments" class="numbered">Section Comments</h4>
 
 <pre><code class="language-css good">/* Header */
 
-#adw-header {}
+.adw-header {}
 
 /* Footer */
 
-#adw-footer {}
+.adw-footer {}
 
 /* Gallery */