From dc39c822334fae75787bd1bba50ec07bef377e71 Mon Sep 17 00:00:00 2001 From: Tony Ruscoe Date: Wed, 15 Nov 2017 11:50:33 +0000 Subject: [PATCH] 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. --- htmlcssguide.html | 97 +++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 59 deletions(-) diff --git a/htmlcssguide.html b/htmlcssguide.html index e93a6d7a9..79ebafe2e 100644 --- a/htmlcssguide.html +++ b/htmlcssguide.html @@ -13,18 +13,12 @@

Google HTML/CSS Style Guide

1 Background

-

-

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.

-

- -

-

2 General

2.1 General Style Rules

@@ -59,14 +53,6 @@

2.1.1 Protocol

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; - - -

- -

- -

-

2.2 General Formatting Rules

2.2.1 Indentation

@@ -167,8 +153,6 @@

2.3.3 Action Items

<center>Test</center> -

- 
<!-- TODO: remove optional tags -->
 <ul>
   <li>Apples</li>
@@ -233,8 +217,6 @@ 
3.1.3 Semantics

 
Using HTML according to its purpose is important for accessibility, reuse, and
 code efficiency reasons.

 
-

-
 
<!-- Not recommended -->
 <div onclick="goToRecommendations();">All recommendations</div>
 

@@ -259,8 +241,6 @@ 
3.1.4 Multimedia Fallback

 whose purpose is purely decorative which you cannot immediately use CSS for, use
 no alternative text, as in alt="".)

 
-

-
 
<!-- Not recommended -->
 <img src="spreadsheet.png">
 

@@ -288,8 +268,6 @@ 
3.1.5 Separation of Concerns

 maintenance reasons. It is always more expensive to change HTML documents and
 templates than it is to update style sheets and scripts.

 
-

-
 
<!-- Not recommended -->
 <!DOCTYPE html>
 <title>HTML sucks</title>
@@ -338,7 +316,7 @@ 
3.1.7 Optional Tags

 
Omit optional tags (optional).

 
 
For file size optimization and scannability purposes, consider omitting optional
-tags. The HTML5 specification
+tags. The HTML5 specification
 defines what tags can be omitted.

 
 
(This approach may require a grace period to be established as a wider guideline
@@ -372,8 +350,8 @@ 
3.1.8 type Attributes

 (unless not using JavaScript).

 
 
Specifying type attributes in these contexts is not necessary as HTML5 implies
-text/css
-and text/javascript
+text/css
+and text/javascript
 as defaults. This can be safely done even for older browsers.

 
 
<!-- Not recommended -->
@@ -435,7 +413,37 @@ 
3.2.1 General Formatting

 </table>
 

 
-
3.2.2 HTML Quotation Marks

+
3.2.2 HTML Line-Wrapping

+
+
Break long lines (optional).

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

+
+
When line-wrapping, each continuation line should be indented at least 4
+additional spaces from the original line.

+
+
<md-progress-circular md-mode="indeterminate" class="md-accent"
+    ng-show="ctrl.loading" md-diameter="35">
+</md-progress-circular>
+

+
+
<md-progress-circular
+    md-mode="indeterminate"
+    class="md-accent"
+    ng-show="ctrl.loading"
+    md-diameter="35">
+</md-progress-circular>
+

+
+
<md-progress-circular md-mode="indeterminate"
+                      class="md-accent"
+                      ng-show="ctrl.loading"
+                      md-diameter="35">
+</md-progress-circular>
+

+
+
3.2.3 HTML Quotation Marks

 
 
When quoting attributes values, use double quotation marks.

 
@@ -586,7 +594,7 @@ 
4.1.7 Leading 0s

 
 
Omit leading “0”s in values.

 
-
Do not use put 0s in front of values or lengths between -1 and 1.

+
Do not put 0s in front of values or lengths between -1 and 1.

 
 
font-size: .8em;
 

@@ -614,10 +622,6 @@ 
4.1.9 Prefixes

 external sites use prefixes (as namespaces) for ID and class names. Use short,
 unique identifiers followed by a dash.

 
-

-
-

-
 
Using namespaces helps preventing naming conflicts and can make maintenance
 easier, for example in search and replace operations.

 
@@ -659,10 +663,6 @@ 
4.1.11 Hacks

 means using detection and hacks more frequently—and more frequently is too
 frequently.

 
-

-
-

-
 
4.2 CSS Formatting Rules

 
 
4.2.1 Declaration Order

@@ -811,11 +811,10 @@ 
4.2.7 Rule Separation

 
 
4.2.8 CSS Quotation Marks

 
-
Use single quotation marks for attribute selectors and property values.

-
 
Use single ('') rather than double ("") quotation marks for attribute
-selectors or property values. Do not use quotation marks in URI values
-(url()).

+selectors and property values.

+
+
Do not use quotation marks in URI values (url()).

 
 
Exception: If you do need to use the @charset rule, use double quotation
 marks—single quotation marks are not permitted.

@@ -858,26 +857,6 @@ 
4.3.1 Section Comments

 .adw-gallery {}
 

 
-
-
-

-
-

-
-
-
-

-
-

-
-
-
-
-
-

-
-

-
 
Parting Words

 
 
Be consistent.