mirror of
https://github.com/google/styleguide.git
synced 2024-03-22 13:11:43 +08:00
Update HTML/CSS style guide
* Add an optional line-wrapping recommendation. * Update links to the WHATWG HTML spec which were redirecting. * Minor content and markup edits.
This commit is contained in:
Tony Ruscoe
parent
191c247522
commit
dc39c82233
|
|
@ -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>
|
||||
|
|
@ -59,14 +53,6 @@ over HTTPS.</p>
|
|||
@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>
|
||||
|
|
@ -167,8 +153,6 @@ depends on the project’s complexity.)</p>
|
|||
<center>Test</center>
|
||||
</code></pre>
|
||||
|
||||
<p></p>
|
||||
|
||||
<pre><code class="language-html prettyprint"><!-- TODO: remove optional tags -->
|
||||
<ul>
|
||||
<li>Apples</li>
|
||||
|
|
@ -233,8 +217,6 @@ paragraphs, <code>a</code> elements for anchors, etc.</p>
|
|||
<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"><!-- Not recommended -->
|
||||
<div onclick="goToRecommendations();">All recommendations</div>
|
||||
</code></pre>
|
||||
|
|
@ -259,8 +241,6 @@ 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
|
||||
no alternative text, as in <code>alt=""</code>.)</p>
|
||||
|
||||
<p></p>
|
||||
|
||||
<pre><code class="language-html prettyprint badcode"><!-- Not recommended -->
|
||||
<img src="spreadsheet.png">
|
||||
</code></pre>
|
||||
|
|
@ -288,8 +268,6 @@ sheets and scripts as possible from documents and templates.</p>
|
|||
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"><!-- Not recommended -->
|
||||
<!DOCTYPE html>
|
||||
<title>HTML sucks</title>
|
||||
|
|
@ -338,7 +316,7 @@ The currency symbol for the Euro is “€”.
|
|||
<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
|
||||
|
|
@ -372,8 +350,8 @@ tags, not just a selection.)</p>
|
|||
(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"><!-- Not recommended -->
|
||||
|
|
@ -435,7 +413,37 @@ instead of an error.)</p>
|
|||
</table>
|
||||
</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"><md-progress-circular md-mode="indeterminate" class="md-accent"
|
||||
ng-show="ctrl.loading" md-diameter="35">
|
||||
</md-progress-circular>
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-html prettyprint"><md-progress-circular
|
||||
md-mode="indeterminate"
|
||||
class="md-accent"
|
||||
ng-show="ctrl.loading"
|
||||
md-diameter="35">
|
||||
</md-progress-circular>
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-html prettyprint"><md-progress-circular md-mode="indeterminate"
|
||||
class="md-accent"
|
||||
ng-show="ctrl.loading"
|
||||
md-diameter="35">
|
||||
</md-progress-circular>
|
||||
</code></pre>
|
||||
|
||||
<h4 id="HTML_Quotation_Marks">3.2.3 HTML Quotation Marks</h4>
|
||||
|
||||
<p>When quoting attributes values, use double quotation marks.</p>
|
||||
|
||||
|
|
@ -586,7 +594,7 @@ padding: 0;
|
|||
|
||||
<p>Omit leading “0”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>
|
||||
|
|
@ -614,10 +622,6 @@ color: #ebc;
|
|||
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>
|
||||
|
||||
|
|
@ -659,10 +663,6 @@ resistance. That is, allowing and making it easy to use detection and hacks
|
|||
means using detection and hacks more frequently—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>
|
||||
|
|
@ -811,11 +811,10 @@ body {
|
|||
|
||||
<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—<a href="https://www.w3.org/TR/CSS21/syndata.html#charset">single quotation marks are not permitted</a>.</p>
|
||||
|
|
@ -858,26 +857,6 @@ sections with new lines.</p>
|
|||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user