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

Merge pull request #666 from tonyruscoe/gh-pages

Browse Source 
Remove prettyprint from HTML/CSS Style Guide
This commit is contained in:
Tony Ruscoe 2022-01-12 13:59:46 +00:00 committed by GitHub
commit 106edd4b39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
htmlcssguide.html
View File

@ -31,25 +31,25 @@ quality is maintained.</p>
files, style sheets, and scripts, unless the respective files are not available files, style sheets, and scripts, unless the respective files are not available
over HTTPS.</p> over HTTPS.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended: omits the protocol --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended: omits the protocol --&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- Not recommended: uses HTTP --&gt; &lt;!-- Not recommended: uses HTTP --&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint badcode">/* Not recommended: omits the protocol */ <pre><code class="language-css bad">/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans'; @import '//fonts.googleapis.com/css?family=Open+Sans';
/* Not recommended: uses HTTP */ /* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans'; @import 'http://fonts.googleapis.com/css?family=Open+Sans';
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; @import 'https://fonts.googleapis.com/css?family=Open+Sans';
</code></pre> </code></pre>
@ -61,13 +61,13 @@ over HTTPS.</p>
<p>Don&#8217;t use tabs or mix tabs and spaces for indentation.</p> <p>Don&#8217;t use tabs or mix tabs and spaces for indentation.</p>
<pre><code class="language-html prettyprint">&lt;ul&gt; <pre><code class="language-html good">&lt;ul&gt;
&lt;li&gt;Fantastic &lt;li&gt;Fantastic
&lt;li&gt;Great &lt;li&gt;Great
&lt;/ul&gt; &lt;/ul&gt;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">.example { <pre><code class="language-css good">.example {
color: blue; color: blue;
} }
</code></pre> </code></pre>
@ -80,19 +80,19 @@ over HTTPS.</p>
attribute values (unless <code>text/CDATA</code>), CSS selectors, properties, and property attribute values (unless <code>text/CDATA</code>), CSS selectors, properties, and property
values (with the exception of strings).</p> values (with the exception of strings).</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;A HREF="/"&gt;Home&lt;/A&gt; &lt;A HREF="/"&gt;Home&lt;/A&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;img src="google.png" alt="Google"&gt; &lt;img src="google.png" alt="Google"&gt;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
color: #E5E5E5; color: #E5E5E5;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
color: #e5e5e5; color: #e5e5e5;
</code></pre> </code></pre>
@ -102,11 +102,11 @@ color: #e5e5e5;
<p>Trailing white spaces are unnecessary and can complicate diffs.</p> <p>Trailing white spaces are unnecessary and can complicate diffs.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;p&gt;What?_ &lt;p&gt;What?_
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;p&gt;Yes please. &lt;p&gt;Yes please.
</code></pre> </code></pre>
@ -149,11 +149,11 @@ depends on the project&#8217;s complexity.)</p>
<p>Append action items after a colon as in <code>TODO: action item</code>.</p> <p>Append action items after a colon as in <code>TODO: action item</code>.</p>
<pre><code class="language-django prettyprint external">{# TODO(john.doe): revisit centering #} <pre><code class="language-django external good">{# TODO(john.doe): revisit centering #}
&lt;center&gt;Test&lt;/center&gt; &lt;center&gt;Test&lt;/center&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- TODO: remove optional tags --&gt; <pre><code class="language-html good">&lt;!-- TODO: remove optional tags --&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;Apples&lt;/li&gt; &lt;li&gt;Apples&lt;/li&gt;
&lt;li&gt;Oranges&lt;/li&gt; &lt;li&gt;Oranges&lt;/li&gt;
@ -194,12 +194,12 @@ to test.
learning about technical requirements and constraints, and that ensures proper learning about technical requirements and constraints, and that ensures proper
HTML usage.</p> HTML usage.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;title&gt;Test&lt;/title&gt; &lt;title&gt;Test&lt;/title&gt;
&lt;article&gt;This is only a test. &lt;article&gt;This is only a test.
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;meta charset="utf-8"&gt; &lt;meta charset="utf-8"&gt;
&lt;title&gt;Test&lt;/title&gt; &lt;title&gt;Test&lt;/title&gt;
@ -217,11 +217,11 @@ paragraphs, <code>a</code> elements for anchors, etc.</p>
<p>Using HTML according to its purpose is important for accessibility, reuse, and <p>Using HTML according to its purpose is important for accessibility, reuse, and
code efficiency reasons.</p> code efficiency reasons.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;div onclick="goToRecommendations();"&gt;All recommendations&lt;/div&gt; &lt;div onclick="goToRecommendations();"&gt;All recommendations&lt;/div&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;a href="recommendations/"&gt;All recommendations&lt;/a&gt; &lt;a href="recommendations/"&gt;All recommendations&lt;/a&gt;
</code></pre> </code></pre>
@ -241,11 +241,11 @@ may have no way of understanding what video or audio contents are about either.<
whose purpose is purely decorative which you cannot immediately use CSS for, use whose purpose is purely decorative which you cannot immediately use CSS for, use
no alternative text, as in <code>alt=""</code>.)</p> no alternative text, as in <code>alt=""</code>.)</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;img src="spreadsheet.png"&gt; &lt;img src="spreadsheet.png"&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;img src="spreadsheet.png" alt="Spreadsheet screenshot."&gt; &lt;img src="spreadsheet.png" alt="Spreadsheet screenshot."&gt;
</code></pre> </code></pre>
@ -268,7 +268,7 @@ sheets and scripts as possible from documents and templates.</p>
maintenance reasons. It is always more expensive to change HTML documents and maintenance reasons. It is always more expensive to change HTML documents and
templates than it is to update style sheets and scripts.</p> templates than it is to update style sheets and scripts.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;title&gt;HTML sucks&lt;/title&gt; &lt;title&gt;HTML sucks&lt;/title&gt;
&lt;link rel="stylesheet" href="base.css" media="screen"&gt; &lt;link rel="stylesheet" href="base.css" media="screen"&gt;
@ -281,7 +281,7 @@ templates than it is to update style sheets and scripts.</p>
my website without doing everything all over again!&lt;/center&gt; my website without doing everything all over again!&lt;/center&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;title&gt;My first CSS-only redesign&lt;/title&gt; &lt;title&gt;My first CSS-only redesign&lt;/title&gt;
&lt;link rel="stylesheet" href="default.css"&gt; &lt;link rel="stylesheet" href="default.css"&gt;
@ -303,11 +303,11 @@ as well as among teams.</p>
<p>The only exceptions apply to characters with special meaning in HTML (like <code>&lt;</code> <p>The only exceptions apply to characters with special meaning in HTML (like <code>&lt;</code>
and <code>&amp;</code>) as well as control or &#8220;invisible&#8221; characters (like no-break spaces).</p> and <code>&amp;</code>) as well as control or &#8220;invisible&#8221; characters (like no-break spaces).</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
The currency symbol for the Euro is &amp;ldquo;&amp;eur;&amp;rdquo;. The currency symbol for the Euro is &amp;ldquo;&amp;eur;&amp;rdquo;.
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
The currency symbol for the Euro is &#8220;&#8364;&#8221;. The currency symbol for the Euro is &#8220;&#8364;&#8221;.
</code></pre> </code></pre>
@ -324,7 +324,7 @@ as it&#8217;s significantly different from what web developers are typically tau
For consistency and simplicity reasons it&#8217;s best served omitting all optional For consistency and simplicity reasons it&#8217;s best served omitting all optional
tags, not just a selection.)</p> tags, not just a selection.)</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -336,7 +336,7 @@ tags, not just a selection.)</p>
&lt;/html&gt; &lt;/html&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;title&gt;Saving money, saving bytes&lt;/title&gt; &lt;title&gt;Saving money, saving bytes&lt;/title&gt;
&lt;p&gt;Qed. &lt;p&gt;Qed.
@ -354,21 +354,21 @@ tags, not just a selection.)</p>
and <a href="https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a> and <a href="https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a>
as defaults. This can be safely done even for older browsers.</p> as defaults. This can be safely done even for older browsers.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;link rel="stylesheet" href="https://www.google.com/css/maia.css" &lt;link rel="stylesheet" href="https://www.google.com/css/maia.css"
type="text/css"&gt; type="text/css"&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;link rel="stylesheet" href="https://www.google.com/css/maia.css"&gt; &lt;link rel="stylesheet" href="https://www.google.com/css/maia.css"&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js" &lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"&gt;&lt;/script&gt; type="text/javascript"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"&gt;&lt;/script&gt; &lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
@ -389,19 +389,19 @@ on a new line.</p>
put all <code>li</code> elements in one line. A linter is encouraged to throw a warning put all <code>li</code> elements in one line. A linter is encouraged to throw a warning
instead of an error.)</p> instead of an error.)</p>
<pre><code class="language-html prettyprint">&lt;blockquote&gt; <pre><code class="language-html good">&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Space&lt;/em&gt;, the final frontier.&lt;/p&gt; &lt;p&gt;&lt;em&gt;Space&lt;/em&gt;, the final frontier.&lt;/p&gt;
&lt;/blockquote&gt; &lt;/blockquote&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;ul&gt; <pre><code class="language-html good">&lt;ul&gt;
&lt;li&gt;Moe &lt;li&gt;Moe
&lt;li&gt;Larry &lt;li&gt;Larry
&lt;li&gt;Curly &lt;li&gt;Curly
&lt;/ul&gt; &lt;/ul&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;table&gt; <pre><code class="language-html good">&lt;table&gt;
&lt;thead&gt; &lt;thead&gt;
&lt;tr&gt; &lt;tr&gt;
&lt;th scope="col"&gt;Income &lt;th scope="col"&gt;Income
@ -423,12 +423,12 @@ wrapping long lines if it significantly improves readability.</p>
<p>When line-wrapping, each continuation line should be indented at least 4 <p>When line-wrapping, each continuation line should be indented at least 4
additional spaces from the original line.</p> additional spaces from the original line.</p>
<pre><code class="language-html prettyprint">&lt;md-progress-circular md-mode="indeterminate" class="md-accent" <pre><code class="language-html good">&lt;md-progress-circular md-mode="indeterminate" class="md-accent"
ng-show="ctrl.loading" md-diameter="35"&gt; ng-show="ctrl.loading" md-diameter="35"&gt;
&lt;/md-progress-circular&gt; &lt;/md-progress-circular&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;md-progress-circular <pre><code class="language-html good">&lt;md-progress-circular
md-mode="indeterminate" md-mode="indeterminate"
class="md-accent" class="md-accent"
ng-show="ctrl.loading" ng-show="ctrl.loading"
@ -436,7 +436,7 @@ additional spaces from the original line.</p>
&lt;/md-progress-circular&gt; &lt;/md-progress-circular&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;md-progress-circular md-mode="indeterminate" <pre><code class="language-html good">&lt;md-progress-circular md-mode="indeterminate"
class="md-accent" class="md-accent"
ng-show="ctrl.loading" ng-show="ctrl.loading"
md-diameter="35"&gt; md-diameter="35"&gt;
@ -450,11 +450,11 @@ additional spaces from the original line.</p>
<p>Use double (<code>""</code>) rather than single quotation marks (<code>''</code>) around attribute <p>Use double (<code>""</code>) rather than single quotation marks (<code>''</code>) around attribute
values.</p> values.</p>
<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
&lt;a class='maia-button maia-button-secondary'&gt;Sign in&lt;/a&gt; &lt;a class='maia-button maia-button-secondary'&gt;Sign in&lt;/a&gt;
</code></pre> </code></pre>
<pre><code class="language-html prettyprint">&lt;!-- Recommended --&gt; <pre><code class="language-html good">&lt;!-- Recommended --&gt;
&lt;a class="maia-button maia-button-secondary"&gt;Sign in&lt;/a&gt; &lt;a class="maia-button maia-button-secondary"&gt;Sign in&lt;/a&gt;
</code></pre> </code></pre>
@ -495,7 +495,7 @@ meaning different from their siblings. They are typically needed as &#8220;helpe
<p>Using functional or generic names reduces the probability of unnecessary <p>Using functional or generic names reduces the probability of unnecessary
document or template changes.</p> document or template changes.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended: meaningless */ <pre><code class="language-css bad">/* Not recommended: meaningless */
#yee-1901 {} #yee-1901 {}
/* Not recommended: presentational */ /* Not recommended: presentational */
@ -503,7 +503,7 @@ document or template changes.</p>
.clear {} .clear {}
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended: specific */ <pre><code class="language-css good">/* Recommended: specific */
#gallery {} #gallery {}
#login {} #login {}
.video {} .video {}
@ -522,12 +522,12 @@ document or template changes.</p>
<p>Using ID and class names this way contributes to acceptable levels of <p>Using ID and class names this way contributes to acceptable levels of
understandability and code efficiency.</p> understandability and code efficiency.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
#navigation {} #navigation {}
.atr {} .atr {}
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
#nav {} #nav {}
.author {} .author {}
</code></pre> </code></pre>
@ -541,12 +541,12 @@ conjunction with IDs or 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> <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 prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
ul#example {} ul#example {}
div.error {} div.error {}
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
#example {} #example {}
.error {} .error {}
</code></pre> </code></pre>
@ -561,7 +561,7 @@ where only one value is explicitly set.</p>
<p>Using shorthand properties is useful for code efficiency and understandability.</p> <p>Using shorthand properties is useful for code efficiency and understandability.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
border-top-style: none; border-top-style: none;
font-family: palatino, georgia, serif; font-family: palatino, georgia, serif;
font-size: 100%; font-size: 100%;
@ -572,7 +572,7 @@ padding-right: 1em;
padding-top: 0; padding-top: 0;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
border-top: 0; border-top: 0;
font: 100%/1.6 palatino, georgia, serif; font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em; padding: 0 1em 2em;
@ -584,7 +584,7 @@ padding: 0 1em 2em;
<p>Do not use units after <code>0</code> values unless they are required.</p> <p>Do not use units after <code>0</code> values unless they are required.</p>
<pre><code class="language-css prettyprint">flex: 0px; /* This flex-basis component requires a unit. */ <pre><code class="language-css good">flex: 0px; /* This flex-basis component requires a unit. */
flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */ flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -596,7 +596,7 @@ padding: 0;
<p>Do not put <code>0</code>s in front of values or lengths between -1 and 1.</p> <p>Do not put <code>0</code>s in front of values or lengths between -1 and 1.</p>
<pre><code class="language-css prettyprint">font-size: .8em; <pre><code class="language-css good">font-size: .8em;
</code></pre> </code></pre>
<h4 id="Hexadecimal_Notation">4.1.8 Hexadecimal Notation</h4> <h4 id="Hexadecimal_Notation">4.1.8 Hexadecimal Notation</h4>
@ -606,11 +606,11 @@ padding: 0;
<p>For color values that permit it, 3 character hexadecimal notation is shorter and <p>For color values that permit it, 3 character hexadecimal notation is shorter and
more succinct.</p> more succinct.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
color: #eebbcc; color: #eebbcc;
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
color: #ebc; color: #ebc;
</code></pre> </code></pre>
@ -625,7 +625,7 @@ unique identifiers followed by a dash.</p>
<p>Using namespaces helps preventing naming conflicts and can make maintenance <p>Using namespaces helps preventing naming conflicts and can make maintenance
easier, for example in search and replace operations.</p> easier, for example in search and replace operations.</p>
<pre><code class="language-css prettyprint">.adw-help {} /* AdWords */ <pre><code class="language-css good">.adw-help {} /* AdWords */
#maia-note {} /* Maia */ #maia-note {} /* Maia */
</code></pre> </code></pre>
@ -637,14 +637,14 @@ easier, for example in search and replace operations.</p>
(including none at all) other than hyphens, in order to improve understanding (including none at all) other than hyphens, in order to improve understanding
and scannability.</p> and scannability.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended: does not separate the words &#8220;demo&#8221; and &#8220;image&#8221; */ <pre><code class="language-css bad">/* Not recommended: does not separate the words &#8220;demo&#8221; and &#8220;image&#8221; */
.demoimage {} .demoimage {}
/* Not recommended: uses underscore instead of hyphen */ /* Not recommended: uses underscore instead of hyphen */
.error_status {} .error_status {}
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
#video-id {} #video-id {}
.ads-sample {} .ads-sample {}
</code></pre> </code></pre>
@ -676,7 +676,7 @@ way that is easy to remember and maintain.</p>
vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. vendor-specific prefixes for a certain CSS property should be kept sorted (e.g.
-moz prefix comes before -webkit).</p> -moz prefix comes before -webkit).</p>
<pre><code class="language-css prettyprint">background: fuchsia; <pre><code class="language-css good">background: fuchsia;
border: 1px solid; border: 1px solid;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
@ -694,7 +694,7 @@ text-indent: 2em;
that is rules within rules as well as declarations, so to reflect hierarchy and that is rules within rules as well as declarations, so to reflect hierarchy and
improve understanding.</p> improve understanding.</p>
<pre><code class="language-css prettyprint">@media screen, projection { <pre><code class="language-css good">@media screen, projection {
html { html {
background: #fff; background: #fff;
@ -711,14 +711,14 @@ improve understanding.</p>
<p>End every declaration with a semicolon for consistency and extensibility <p>End every declaration with a semicolon for consistency and extensibility
reasons.</p> reasons.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
.test { .test {
display: block; display: block;
height: 100px height: 100px
} }
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
.test { .test {
display: block; display: block;
height: 100px; height: 100px;
@ -732,13 +732,13 @@ reasons.</p>
<p>Always use a single space between property and value (but no space between <p>Always use a single space between property and value (but no space between
property and colon) for consistency reasons.</p> property and colon) for consistency reasons.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
h3 { h3 {
font-weight:bold; font-weight:bold;
} }
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
h3 { h3 {
font-weight: bold; font-weight: bold;
} }
@ -754,7 +754,7 @@ begins the <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">declarat
<p>The opening brace should be on the same line as the last selector in a given <p>The opening brace should be on the same line as the last selector in a given
rule.</p> rule.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended: missing space */ <pre><code class="language-css bad">/* Not recommended: missing space */
#video{ #video{
margin-top: 1em; margin-top: 1em;
} }
@ -766,7 +766,7 @@ rule.</p>
} }
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
#video { #video {
margin-top: 1em; margin-top: 1em;
} }
@ -778,13 +778,13 @@ rule.</p>
<p>Always start a new line for each selector and declaration.</p> <p>Always start a new line for each selector and declaration.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
a:focus, a:active { a:focus, a:active {
position: relative; top: 1px; position: relative; top: 1px;
} }
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
h1, h1,
h2, h2,
h3 { h3 {
@ -799,7 +799,7 @@ h3 {
<p>Always put a blank line (two line breaks) between rules.</p> <p>Always put a blank line (two line breaks) between rules.</p>
<pre><code class="language-css prettyprint">html { <pre><code class="language-css good">html {
background: #fff; background: #fff;
} }
@ -819,7 +819,7 @@ selectors and property values.</p>
<p>Exception: If you do need to use the <code>@charset</code> rule, use double quotation <p>Exception: If you do need to use the <code>@charset</code> rule, use double quotation
marks&#8212;<a href="https://www.w3.org/TR/CSS21/syndata.html#charset">single quotation marks are not permitted</a>.</p> marks&#8212;<a href="https://www.w3.org/TR/CSS21/syndata.html#charset">single quotation marks are not permitted</a>.</p>
<pre><code class="language-css prettyprint badcode">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
@import url("https://www.google.com/css/maia.css"); @import url("https://www.google.com/css/maia.css");
html { html {
@ -827,7 +827,7 @@ html {
} }
</code></pre> </code></pre>
<pre><code class="language-css prettyprint">/* Recommended */ <pre><code class="language-css good">/* Recommended */
@import url(https://www.google.com/css/maia.css); @import url(https://www.google.com/css/maia.css);
html { html {
@ -844,7 +844,7 @@ html {
<p>If possible, group style sheet sections together by using comments. Separate <p>If possible, group style sheet sections together by using comments. Separate
sections with new lines.</p> sections with new lines.</p>
<pre><code class="language-css prettyprint">/* Header */ <pre><code class="language-css good">/* Header */
#adw-header {} #adw-header {}

9
include/jsguide.js
View File

@ -41,9 +41,12 @@ window.initStyleGuide = function(init) {
// properly. Fix it by moving the code directly into the pre. // properly. Fix it by moving the code directly into the pre.
find('pre > code', function(code) { find('pre > code', function(code) {
var pre = code.parentElement; var pre = code.parentElement;
// internal TS style guide does not want prettyprint // Internal HTML/CSS & TS style guides do not use prettyprint.
if (code.classList.contains("language-ts")) { if (code.classList.contains('language-css') ||
code.classList.add("prettyprint"); code.classList.contains('language-django') ||
code.classList.contains('language-html') ||
code.classList.contains('language-ts')) {
code.classList.add('prettyprint');
} }
pre.className = code.className; pre.className = code.className;
pre.innerHTML = code.innerHTML; pre.innerHTML = code.innerHTML;