Skip to content

Commit

Permalink
Update HTML/CSS style guide
Browse files Browse the repository at this point in the history 
* Add an optional line-wrapping recommendation.
* Update links to the WHATWG HTML spec which were redirecting.
* Minor content and markup edits.
  • Loading branch information
@tonyruscoe
tonyruscoe committed Nov 15, 2017
1 parent 191c247 commit dc39c82
Showing 1 changed file with 38 additions and 59 deletions.
97 changes: 38 additions & 59 deletions htmlcssguide.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,12 @@
<h1>Google HTML/CSS Style Guide</h1>
<h2 id="Background">1 Background</h2>

<p></p>

<p>This document defines formatting and style rules for HTML and CSS. It aims at
improving collaboration, code quality, and enabling supporting infrastructure.
It applies to raw, working files that use HTML and CSS, including GSS files.
Tools are free to obfuscate, minify, and compile as long as the general code
quality is maintained.</p>

<p></p>

<p></p>

<h2 id="General">2 General</h2>

<h3 id="General_Style_Rules">2.1 General Style Rules</h3>
Expand Down Expand Up @@ -59,14 +53,6 @@ <h4 id="Protocol">2.1.1 Protocol</h4>
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
</code></pre>



<p></p>

<p></p>

<p></p>

<h3 id="General_Formatting_Rules">2.2 General Formatting Rules</h3>

<h4 id="Indentation">2.2.1 Indentation</h4>
Expand Down Expand Up @@ -167,8 +153,6 @@ <h4 id="Action_Items">2.3.3 Action Items</h4>
&lt;center&gt;Test&lt;/center&gt;
</code></pre>

<p></p>

<pre><code class="language-html prettyprint">&lt;!-- TODO: remove optional tags --&gt;
&lt;ul&gt;
&lt;li&gt;Apples&lt;/li&gt;
Expand Down Expand Up @@ -233,8 +217,6 @@ <h4 id="Semantics">3.1.3 Semantics</h4>
<p>Using HTML according to its purpose is important for accessibility, reuse, and
code efficiency reasons.</p>

<p></p>

<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt;
&lt;div onclick="goToRecommendations();"&gt;All recommendations&lt;/div&gt;
</code></pre>
Expand All @@ -259,8 +241,6 @@ <h4 id="Multimedia_Fallback">3.1.4 Multimedia Fallback</h4>
whose purpose is purely decorative which you cannot immediately use CSS for, use
no alternative text, as in <code>alt=""</code>.)</p>

<p></p>

<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt;
&lt;img src="spreadsheet.png"&gt;
</code></pre>
Expand Down Expand Up @@ -288,8 +268,6 @@ <h4 id="Separation_of_Concerns">3.1.5 Separation of Concerns</h4>
maintenance reasons. It is always more expensive to change HTML documents and
templates than it is to update style sheets and scripts.</p>

<p></p>

<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt;
&lt;!DOCTYPE html&gt;
&lt;title&gt;HTML sucks&lt;/title&gt;
Expand Down Expand Up @@ -338,7 +316,7 @@ <h4 id="Optional_Tags">3.1.7 Optional Tags</h4>
<p>Omit optional tags (optional).</p>

<p>For file size optimization and scannability purposes, consider omitting optional
tags. The <a href="https://whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission">HTML5 specification</a>
tags. The <a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission">HTML5 specification</a>
defines what tags can be omitted.</p>

<p>(This approach may require a grace period to be established as a wider guideline
Expand Down Expand Up @@ -372,8 +350,8 @@ <h4 id="type_Attributes">3.1.8 <code>type</code> Attributes</h4>
(unless not using JavaScript).</p>

<p>Specifying <code>type</code> attributes in these contexts is not necessary as HTML5 implies
<a href="https://whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-type"><code>text/css</code></a>
and <a href="https://whatwg.org/specs/web-apps/current-work/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a>
<a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-style-type"><code>text/css</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>

<pre><code class="language-html prettyprint badcode">&lt;!-- Not recommended --&gt;
Expand Down Expand Up @@ -435,7 +413,37 @@ <h4 id="General_Formatting">3.2.1 General Formatting</h4>
&lt;/table&gt;
</code></pre>

<h4 id="HTML_Quotation_Marks">3.2.2 HTML Quotation Marks</h4>
<h4 id="HTML_Line-Wrapping">3.2.2 HTML Line-Wrapping</h4>

<p>Break long lines (optional).</p>

<p>While there is no column limit recommendation for HTML, you may consider
wrapping long lines if it significantly improves readability.</p>

<p>When line-wrapping, each continuation line should be indented at least 4
additional spaces from the original line.</p>

<pre><code class="language-html prettyprint">&lt;md-progress-circular md-mode="indeterminate" class="md-accent"
ng-show="ctrl.loading" md-diameter="35"&gt;
&lt;/md-progress-circular&gt;
</code></pre>

<pre><code class="language-html prettyprint">&lt;md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35"&gt;
&lt;/md-progress-circular&gt;
</code></pre>

<pre><code class="language-html prettyprint">&lt;md-progress-circular md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35"&gt;
&lt;/md-progress-circular&gt;
</code></pre>

<h4 id="HTML_Quotation_Marks">3.2.3 HTML Quotation Marks</h4>

<p>When quoting attributes values, use double quotation marks.</p>

Expand Down Expand Up @@ -586,7 +594,7 @@ <h4 id="Leading_0s">4.1.7 Leading 0s</h4>

<p>Omit leading &#8220;0&#8221;s in values.</p>

<p>Do not use 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;
</code></pre>
Expand Down Expand Up @@ -614,10 +622,6 @@ <h4 id="Prefixes">4.1.9 Prefixes</h4>
external sites use prefixes (as namespaces) for ID and class names. Use short,
unique identifiers followed by a dash.</p>

<p></p>

<p></p>

<p>Using namespaces helps preventing naming conflicts and can make maintenance
easier, for example in search and replace operations.</p>

Expand Down Expand Up @@ -659,10 +663,6 @@ <h4 id="Hacks">4.1.11 Hacks</h4>
means using detection and hacks more frequently&#8212;and more frequently is too
frequently.</p>

<p></p>

<p></p>

<h3 id="CSS_Formatting_Rules">4.2 CSS Formatting Rules</h3>

<h4 id="Declaration_Order">4.2.1 Declaration Order</h4>
Expand Down Expand Up @@ -811,11 +811,10 @@ <h4 id="Rule_Separation">4.2.7 Rule Separation</h4>

<h4 id="CSS_Quotation_Marks">4.2.8 CSS Quotation Marks</h4>

<p>Use single quotation marks for attribute selectors and property values.</p>

<p>Use single (<code>''</code>) rather than double (<code>""</code>) quotation marks for attribute
selectors or property values. Do not use quotation marks in URI values
(<code>url()</code>).</p>
selectors and property values.</p>

<p>Do not use quotation marks in URI values (<code>url()</code>).</p>

<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>
Expand Down Expand Up @@ -858,26 +857,6 @@ <h4 id="Section_Comments">4.3.1 Section Comments</h4>
.adw-gallery {}
</code></pre>



<p></p>

<p></p>



<p></p>

<p></p>





<p></p>

<p></p>

<h2 id="Parting_Words">Parting Words</h2>

<p><em>Be consistent.</em></p>
Expand Down

0 comments on commit dc39c82

Please sign in to comment.