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

Move the ID and Class Name sections to be together

Browse Source 
This change was made to the internal style guide a while ago to make it easier to find related sections also containing IDs and class name guidance.
This commit is contained in:
Tony Ruscoe 2022-01-13 14:03:19 +00:00 committed by GitHub
parent 2dcaf50252
commit 5ac8b604fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
htmlcssguide.html
View File

@ -530,6 +530,41 @@ understandability and code efficiency.</p>
.author {}
</code></pre>
<h4 id="ID_and_Class_Name_Delimiters" class="numbered">ID and Class Name Delimiters</h4>
<p>Separate words in ID and 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
and scannability.</p>
<pre><code class="language-css bad">/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
</code></pre>
<pre><code class="language-css good">/* Recommended */
#video-id {}
.ads-sample {}
</code></pre>
<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>
<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 */
</code></pre>
<h4 id="Type_Selectors" class="numbered">Type Selectors</h4>
<p>Avoid qualifying ID and class names with type selectors.</p>
@ -614,41 +649,6 @@ color: #eebbcc;
color: #ebc;
</code></pre>
<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>
<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 */
</code></pre>
<h4 id="ID_and_Class_Name_Delimiters" class="numbered">ID and Class Name Delimiters</h4>
<p>Separate words in ID and 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
and scannability.</p>
<pre><code class="language-css bad">/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
</code></pre>
<pre><code class="language-css good">/* Recommended */
#video-id {}
.ads-sample {}
</code></pre>
<h4 id="Hacks" class="numbered">Hacks</h4>
<p>Avoid user agent detection as well as CSS “hacks”—try a different approach