mirror of
https://github.com/google/styleguide.git
synced 2024-03-22 13:11:43 +08:00
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.
This commit is contained in:
parent
5ac8b604fa
commit
8d4a22bd69
|
@ -371,6 +371,34 @@ as defaults. This can be safely done even for older browsers.</p>
|
|||
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
|
||||
</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"><!-- Not recommended: `window.userProfile` will resolve to reference the <div> node -->
|
||||
<div id="userProfile"></div>
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-html good"><!-- Recommended: `id` attribute is required and its value includes a hyphen -->
|
||||
<div aria-describedby="user-profile">
|
||||
…
|
||||
<div id="user-profile"></div>
|
||||
…
|
||||
</div>
|
||||
</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 */
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user