StarMirror/styleguide
1
0
Fork 0
mirror of https://github.com/google/styleguide.git synced 2024-03-22 13:11:43 +08:00
Code Issues Projects Releases Wiki Activity

Update ID and class selector/attribute guidance

Browse Source 
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.
This commit is contained in:
Tony Ruscoe 2022-01-13 14:13:57 +00:00 committed by GitHub
parent 5ac8b604fa
commit 8d4a22bd69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 73 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
htmlcssguide.html
View File

@ -371,6 +371,34 @@ as defaults. This can be safely done even for older browsers.</p>
&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 @@ to test.</p>
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,7 +522,7 @@ meaning different from their siblings. They are typically needed as “helpers.
document or template changes.</p>
<pre><code class="language-css bad">/* Not recommended: meaningless */
#yee-1901 {}
.yee-1901 {}
/* Not recommended: presentational */
.button-green {}
@ -502,8 +530,8 @@ document or template changes.</p>
</code></pre>
<pre><code class="language-css good">/* Recommended: specific */
#gallery {}
#login {}
.gallery {}
.login {}
.video {}
/* Recommended: generic */
@ -511,28 +539,28 @@ document or template changes.</p>
.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 @@ and scannability.</p>
</code></pre>
<pre><code class="language-css good">/* Recommended */
#video-id {}
.video-id {}
.ads-sample {}
</code></pre>
@ -555,36 +583,52 @@ and scannability.</p>
<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 @@ begins the
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 @@ sections with new lines.</p>
<pre><code class="language-css good">/* Header */
#adw-header {}
.adw-header {}
/* Footer */
#adw-footer {}
.adw-footer {}
/* Gallery */