1*8c35d5eeSXin Li<!DOCTYPE html> 2*8c35d5eeSXin Li<html lang="en"> 3*8c35d5eeSXin Li<head> 4*8c35d5eeSXin Li<meta charset="utf-8"> 5*8c35d5eeSXin Li<title>Google HTML/CSS Style Guide</title> 6*8c35d5eeSXin Li<link rel="stylesheet" href="javaguide.css"> 7*8c35d5eeSXin Li<script src="include/styleguide.js"></script> 8*8c35d5eeSXin Li<link rel="shortcut icon" href="https://www.google.com/favicon.ico"> 9*8c35d5eeSXin Li<script src="include/jsguide.js"></script> 10*8c35d5eeSXin Li</head> 11*8c35d5eeSXin Li<body onload="initStyleGuide();"> 12*8c35d5eeSXin Li<div id="content"> 13*8c35d5eeSXin Li<h1>Google HTML/CSS Style Guide</h1> 14*8c35d5eeSXin Li<h2 id="Background">1 Background</h2> 15*8c35d5eeSXin Li 16*8c35d5eeSXin Li<p>This document defines formatting and style rules for HTML and CSS. It aims at 17*8c35d5eeSXin Liimproving collaboration, code quality, and enabling supporting infrastructure. 18*8c35d5eeSXin LiIt applies to raw, working files that use HTML and CSS, including GSS files. 19*8c35d5eeSXin LiTools are free to obfuscate, minify, and compile as long as the general code 20*8c35d5eeSXin Liquality is maintained.</p> 21*8c35d5eeSXin Li 22*8c35d5eeSXin Li<h2 id="General">2 General</h2> 23*8c35d5eeSXin Li 24*8c35d5eeSXin Li<h3 id="General_Style_Rules">2.1 General Style Rules</h3> 25*8c35d5eeSXin Li 26*8c35d5eeSXin Li<h4 id="Protocol">2.1.1 Protocol</h4> 27*8c35d5eeSXin Li 28*8c35d5eeSXin Li<p>Use HTTPS for embedded resources where possible.</p> 29*8c35d5eeSXin Li 30*8c35d5eeSXin Li<p>Always use HTTPS (<code>https:</code>) for images and other media 31*8c35d5eeSXin Lifiles, style sheets, and scripts, unless the respective files are not available 32*8c35d5eeSXin Liover HTTPS.</p> 33*8c35d5eeSXin Li 34*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended: omits the protocol --> 35*8c35d5eeSXin Li<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 36*8c35d5eeSXin Li 37*8c35d5eeSXin Li<!-- Not recommended: uses HTTP --> 38*8c35d5eeSXin Li<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 39*8c35d5eeSXin Li</code></pre> 40*8c35d5eeSXin Li 41*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 42*8c35d5eeSXin Li<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 43*8c35d5eeSXin Li</code></pre> 44*8c35d5eeSXin Li 45*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended: omits the protocol */ 46*8c35d5eeSXin Li@import '//fonts.googleapis.com/css?family=Open+Sans'; 47*8c35d5eeSXin Li 48*8c35d5eeSXin Li/* Not recommended: uses HTTP */ 49*8c35d5eeSXin Li@import 'http://fonts.googleapis.com/css?family=Open+Sans'; 50*8c35d5eeSXin Li</code></pre> 51*8c35d5eeSXin Li 52*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 53*8c35d5eeSXin Li@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 54*8c35d5eeSXin Li</code></pre> 55*8c35d5eeSXin Li 56*8c35d5eeSXin Li<h3 id="General_Formatting_Rules">2.2 General Formatting Rules</h3> 57*8c35d5eeSXin Li 58*8c35d5eeSXin Li<h4 id="Indentation">2.2.1 Indentation</h4> 59*8c35d5eeSXin Li 60*8c35d5eeSXin Li<p>Indent by 2 spaces at a time.</p> 61*8c35d5eeSXin Li 62*8c35d5eeSXin Li<p>Don’t use tabs or mix tabs and spaces for indentation.</p> 63*8c35d5eeSXin Li 64*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><ul> 65*8c35d5eeSXin Li <li>Fantastic 66*8c35d5eeSXin Li <li>Great 67*8c35d5eeSXin Li</ul> 68*8c35d5eeSXin Li</code></pre> 69*8c35d5eeSXin Li 70*8c35d5eeSXin Li<pre><code class="language-css prettyprint">.example { 71*8c35d5eeSXin Li color: blue; 72*8c35d5eeSXin Li} 73*8c35d5eeSXin Li</code></pre> 74*8c35d5eeSXin Li 75*8c35d5eeSXin Li<h4 id="Capitalization">2.2.2 Capitalization</h4> 76*8c35d5eeSXin Li 77*8c35d5eeSXin Li<p>Use only lowercase.</p> 78*8c35d5eeSXin Li 79*8c35d5eeSXin Li<p>All code has to be lowercase: This applies to HTML element names, attributes, 80*8c35d5eeSXin Liattribute values (unless <code>text/CDATA</code>), CSS selectors, properties, and property 81*8c35d5eeSXin Livalues (with the exception of strings).</p> 82*8c35d5eeSXin Li 83*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 84*8c35d5eeSXin Li<A HREF="/">Home</A> 85*8c35d5eeSXin Li</code></pre> 86*8c35d5eeSXin Li 87*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 88*8c35d5eeSXin Li<img src="google.png" alt="Google"> 89*8c35d5eeSXin Li</code></pre> 90*8c35d5eeSXin Li 91*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 92*8c35d5eeSXin Licolor: #E5E5E5; 93*8c35d5eeSXin Li</code></pre> 94*8c35d5eeSXin Li 95*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 96*8c35d5eeSXin Licolor: #e5e5e5; 97*8c35d5eeSXin Li</code></pre> 98*8c35d5eeSXin Li 99*8c35d5eeSXin Li<h4 id="Trailing_Whitespace">2.2.3 Trailing Whitespace</h4> 100*8c35d5eeSXin Li 101*8c35d5eeSXin Li<p>Remove trailing white spaces.</p> 102*8c35d5eeSXin Li 103*8c35d5eeSXin Li<p>Trailing white spaces are unnecessary and can complicate diffs.</p> 104*8c35d5eeSXin Li 105*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 106*8c35d5eeSXin Li<p>What?_ 107*8c35d5eeSXin Li</code></pre> 108*8c35d5eeSXin Li 109*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 110*8c35d5eeSXin Li<p>Yes please. 111*8c35d5eeSXin Li</code></pre> 112*8c35d5eeSXin Li 113*8c35d5eeSXin Li<h3 id="General_Meta_Rules">2.3 General Meta Rules</h3> 114*8c35d5eeSXin Li 115*8c35d5eeSXin Li<h4 id="Encoding">2.3.1 Encoding</h4> 116*8c35d5eeSXin Li 117*8c35d5eeSXin Li<p>Use UTF-8 (no BOM).</p> 118*8c35d5eeSXin Li 119*8c35d5eeSXin Li<p>Make sure your editor uses UTF-8 as character encoding, without a byte order 120*8c35d5eeSXin Limark.</p> 121*8c35d5eeSXin Li 122*8c35d5eeSXin Li<p>Specify the encoding in HTML templates and documents via <code><meta 123*8c35d5eeSXin Licharset="utf-8"></code>. Do not specify the encoding of style sheets as these assume 124*8c35d5eeSXin LiUTF-8.</p> 125*8c35d5eeSXin Li 126*8c35d5eeSXin Li<p>(More on encodings and when and how to specify them can be found in <a href="https://www.w3.org/International/tutorials/tutorial-char-enc/">Handling 127*8c35d5eeSXin Licharacter encodings in HTML and CSS</a>.)</p> 128*8c35d5eeSXin Li 129*8c35d5eeSXin Li<h4 id="Comments">2.3.2 Comments</h4> 130*8c35d5eeSXin Li 131*8c35d5eeSXin Li<p>Explain code as needed, where possible.</p> 132*8c35d5eeSXin Li 133*8c35d5eeSXin Li<p>Use comments to explain code: What does it cover, what purpose does it serve, 134*8c35d5eeSXin Liwhy is respective solution used or preferred?</p> 135*8c35d5eeSXin Li 136*8c35d5eeSXin Li<p>(This item is optional as it is not deemed a realistic expectation to always 137*8c35d5eeSXin Lidemand fully documented code. Mileage may vary heavily for HTML and CSS code and 138*8c35d5eeSXin Lidepends on the project’s complexity.)</p> 139*8c35d5eeSXin Li 140*8c35d5eeSXin Li<h4 id="Action_Items">2.3.3 Action Items</h4> 141*8c35d5eeSXin Li 142*8c35d5eeSXin Li<p>Mark todos and action items with <code>TODO</code>.</p> 143*8c35d5eeSXin Li 144*8c35d5eeSXin Li<p>Highlight todos by using the keyword <code>TODO</code> only, not other common formats like 145*8c35d5eeSXin Li<code>@@</code>.</p> 146*8c35d5eeSXin Li 147*8c35d5eeSXin Li<p>Append a contact (username or mailing list) in parentheses as with the format 148*8c35d5eeSXin Li<code>TODO(contact)</code>.</p> 149*8c35d5eeSXin Li 150*8c35d5eeSXin Li<p>Append action items after a colon as in <code>TODO: action item</code>.</p> 151*8c35d5eeSXin Li 152*8c35d5eeSXin Li<pre><code class="language-django prettyprint external">{# TODO(john.doe): revisit centering #} 153*8c35d5eeSXin Li<center>Test</center> 154*8c35d5eeSXin Li</code></pre> 155*8c35d5eeSXin Li 156*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- TODO: remove optional tags --> 157*8c35d5eeSXin Li<ul> 158*8c35d5eeSXin Li <li>Apples</li> 159*8c35d5eeSXin Li <li>Oranges</li> 160*8c35d5eeSXin Li</ul> 161*8c35d5eeSXin Li</code></pre> 162*8c35d5eeSXin Li 163*8c35d5eeSXin Li<h2 id="HTML">3 HTML</h2> 164*8c35d5eeSXin Li 165*8c35d5eeSXin Li<h3 id="HTML_Style_Rules">3.1 HTML Style Rules</h3> 166*8c35d5eeSXin Li 167*8c35d5eeSXin Li<h4 id="Document_Type">3.1.1 Document Type</h4> 168*8c35d5eeSXin Li 169*8c35d5eeSXin Li<p>Use HTML5.</p> 170*8c35d5eeSXin Li 171*8c35d5eeSXin Li<p>HTML5 (HTML syntax) is preferred for all HTML documents: <code><!DOCTYPE html></code>.</p> 172*8c35d5eeSXin Li 173*8c35d5eeSXin Li<p>(It’s recommended to use HTML, as <code>text/html</code>. Do not use XHTML. XHTML, as 174*8c35d5eeSXin Li<a href="https://hixie.ch/advocacy/xhtml"><code>application/xhtml+xml</code></a>, lacks both browser 175*8c35d5eeSXin Liand infrastructure support and offers less room for optimization than HTML.)</p> 176*8c35d5eeSXin Li 177*8c35d5eeSXin Li<p>Although fine with HTML, do not close void elements, i.e. write <code><br></code>, not 178*8c35d5eeSXin Li<code><br /></code>.</p> 179*8c35d5eeSXin Li 180*8c35d5eeSXin Li<h4 id="HTML_Validity">3.1.2 HTML Validity</h4> 181*8c35d5eeSXin Li 182*8c35d5eeSXin Li<p>Use valid HTML where possible.</p> 183*8c35d5eeSXin Li 184*8c35d5eeSXin Li<p>Use valid HTML code unless that is not possible due to otherwise unattainable 185*8c35d5eeSXin Liperformance goals regarding file size.</p> 186*8c35d5eeSXin Li 187*8c35d5eeSXin Li<p> 188*8c35d5eeSXin Li 189*8c35d5eeSXin LiUse tools such as the <a href="https://validator.w3.org/nu/">W3C HTML validator</a> 190*8c35d5eeSXin Lito test. 191*8c35d5eeSXin Li</p> 192*8c35d5eeSXin Li 193*8c35d5eeSXin Li<p>Using valid HTML is a measurable baseline quality attribute that contributes to 194*8c35d5eeSXin Lilearning about technical requirements and constraints, and that ensures proper 195*8c35d5eeSXin LiHTML usage.</p> 196*8c35d5eeSXin Li 197*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 198*8c35d5eeSXin Li<title>Test</title> 199*8c35d5eeSXin Li<article>This is only a test. 200*8c35d5eeSXin Li</code></pre> 201*8c35d5eeSXin Li 202*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 203*8c35d5eeSXin Li<!DOCTYPE html> 204*8c35d5eeSXin Li<meta charset="utf-8"> 205*8c35d5eeSXin Li<title>Test</title> 206*8c35d5eeSXin Li<article>This is only a test.</article> 207*8c35d5eeSXin Li</code></pre> 208*8c35d5eeSXin Li 209*8c35d5eeSXin Li<h4 id="Semantics">3.1.3 Semantics</h4> 210*8c35d5eeSXin Li 211*8c35d5eeSXin Li<p>Use HTML according to its purpose.</p> 212*8c35d5eeSXin Li 213*8c35d5eeSXin Li<p>Use elements (sometimes incorrectly called “tags”) for what they have been 214*8c35d5eeSXin Licreated for. For example, use heading elements for headings, <code>p</code> elements for 215*8c35d5eeSXin Liparagraphs, <code>a</code> elements for anchors, etc.</p> 216*8c35d5eeSXin Li 217*8c35d5eeSXin Li<p>Using HTML according to its purpose is important for accessibility, reuse, and 218*8c35d5eeSXin Licode efficiency reasons.</p> 219*8c35d5eeSXin Li 220*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 221*8c35d5eeSXin Li<div onclick="goToRecommendations();">All recommendations</div> 222*8c35d5eeSXin Li</code></pre> 223*8c35d5eeSXin Li 224*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 225*8c35d5eeSXin Li<a href="recommendations/">All recommendations</a> 226*8c35d5eeSXin Li</code></pre> 227*8c35d5eeSXin Li 228*8c35d5eeSXin Li<h4 id="Multimedia_Fallback">3.1.4 Multimedia Fallback</h4> 229*8c35d5eeSXin Li 230*8c35d5eeSXin Li<p>Provide alternative contents for multimedia.</p> 231*8c35d5eeSXin Li 232*8c35d5eeSXin Li<p>For multimedia, such as images, videos, animated objects via <code>canvas</code>, make sure 233*8c35d5eeSXin Lito offer alternative access. For images that means use of meaningful alternative 234*8c35d5eeSXin Litext (<code>alt</code>) and for video and audio transcripts and captions, if available.</p> 235*8c35d5eeSXin Li 236*8c35d5eeSXin Li<p>Providing alternative contents is important for accessibility reasons: A blind 237*8c35d5eeSXin Liuser has few cues to tell what an image is about without <code>@alt</code>, and other users 238*8c35d5eeSXin Limay have no way of understanding what video or audio contents are about either.</p> 239*8c35d5eeSXin Li 240*8c35d5eeSXin Li<p>(For images whose <code>alt</code> attributes would introduce redundancy, and for images 241*8c35d5eeSXin Liwhose purpose is purely decorative which you cannot immediately use CSS for, use 242*8c35d5eeSXin Lino alternative text, as in <code>alt=""</code>.)</p> 243*8c35d5eeSXin Li 244*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 245*8c35d5eeSXin Li<img src="spreadsheet.png"> 246*8c35d5eeSXin Li</code></pre> 247*8c35d5eeSXin Li 248*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 249*8c35d5eeSXin Li<img src="spreadsheet.png" alt="Spreadsheet screenshot."> 250*8c35d5eeSXin Li</code></pre> 251*8c35d5eeSXin Li 252*8c35d5eeSXin Li<h4 id="Separation_of_Concerns">3.1.5 Separation of Concerns</h4> 253*8c35d5eeSXin Li 254*8c35d5eeSXin Li<p>Separate structure from presentation from behavior.</p> 255*8c35d5eeSXin Li 256*8c35d5eeSXin Li<p>Strictly keep structure (markup), presentation (styling), and behavior 257*8c35d5eeSXin Li(scripting) apart, and try to keep the interaction between the three to an 258*8c35d5eeSXin Liabsolute minimum.</p> 259*8c35d5eeSXin Li 260*8c35d5eeSXin Li<p>That is, make sure documents and templates contain only HTML and HTML that is 261*8c35d5eeSXin Lisolely serving structural purposes. Move everything presentational into style 262*8c35d5eeSXin Lisheets, and everything behavioral into scripts.</p> 263*8c35d5eeSXin Li 264*8c35d5eeSXin Li<p>In addition, keep the contact area as small as possible by linking as few style 265*8c35d5eeSXin Lisheets and scripts as possible from documents and templates.</p> 266*8c35d5eeSXin Li 267*8c35d5eeSXin Li<p>Separating structure from presentation from behavior is important for 268*8c35d5eeSXin Limaintenance reasons. It is always more expensive to change HTML documents and 269*8c35d5eeSXin Litemplates than it is to update style sheets and scripts.</p> 270*8c35d5eeSXin Li 271*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 272*8c35d5eeSXin Li<!DOCTYPE html> 273*8c35d5eeSXin Li<title>HTML sucks</title> 274*8c35d5eeSXin Li<link rel="stylesheet" href="base.css" media="screen"> 275*8c35d5eeSXin Li<link rel="stylesheet" href="grid.css" media="screen"> 276*8c35d5eeSXin Li<link rel="stylesheet" href="print.css" media="print"> 277*8c35d5eeSXin Li<h1 style="font-size: 1em;">HTML sucks</h1> 278*8c35d5eeSXin Li<p>I’ve read about this on a few sites but now I’m sure: 279*8c35d5eeSXin Li <u>HTML is stupid!!1</u> 280*8c35d5eeSXin Li<center>I can’t believe there’s no way to control the styling of 281*8c35d5eeSXin Li my website without doing everything all over again!</center> 282*8c35d5eeSXin Li</code></pre> 283*8c35d5eeSXin Li 284*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 285*8c35d5eeSXin Li<!DOCTYPE html> 286*8c35d5eeSXin Li<title>My first CSS-only redesign</title> 287*8c35d5eeSXin Li<link rel="stylesheet" href="default.css"> 288*8c35d5eeSXin Li<h1>My first CSS-only redesign</h1> 289*8c35d5eeSXin Li<p>I’ve read about this on a few sites but today I’m actually 290*8c35d5eeSXin Li doing it: separating concerns and avoiding anything in the HTML of 291*8c35d5eeSXin Li my website that is presentational. 292*8c35d5eeSXin Li<p>It’s awesome! 293*8c35d5eeSXin Li</code></pre> 294*8c35d5eeSXin Li 295*8c35d5eeSXin Li<h4 id="Entity_References">3.1.6 Entity References</h4> 296*8c35d5eeSXin Li 297*8c35d5eeSXin Li<p>Do not use entity references.</p> 298*8c35d5eeSXin Li 299*8c35d5eeSXin Li<p>There is no need to use entity references like <code>&mdash;</code>, <code>&rdquo;</code>, or 300*8c35d5eeSXin Li<code>&#x263a;</code>, assuming the same encoding (UTF-8) is used for files and editors 301*8c35d5eeSXin Lias well as among teams.</p> 302*8c35d5eeSXin Li 303*8c35d5eeSXin Li<p>The only exceptions apply to characters with special meaning in HTML (like <code><</code> 304*8c35d5eeSXin Liand <code>&</code>) as well as control or “invisible” characters (like no-break spaces).</p> 305*8c35d5eeSXin Li 306*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 307*8c35d5eeSXin LiThe currency symbol for the Euro is &ldquo;&eur;&rdquo;. 308*8c35d5eeSXin Li</code></pre> 309*8c35d5eeSXin Li 310*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 311*8c35d5eeSXin LiThe currency symbol for the Euro is “€”. 312*8c35d5eeSXin Li</code></pre> 313*8c35d5eeSXin Li 314*8c35d5eeSXin Li<h4 id="Optional_Tags">3.1.7 Optional Tags</h4> 315*8c35d5eeSXin Li 316*8c35d5eeSXin Li<p>Omit optional tags (optional).</p> 317*8c35d5eeSXin Li 318*8c35d5eeSXin Li<p>For file size optimization and scannability purposes, consider omitting optional 319*8c35d5eeSXin Litags. The <a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission">HTML5 specification</a> 320*8c35d5eeSXin Lidefines what tags can be omitted.</p> 321*8c35d5eeSXin Li 322*8c35d5eeSXin Li<p>(This approach may require a grace period to be established as a wider guideline 323*8c35d5eeSXin Lias it’s significantly different from what web developers are typically taught. 324*8c35d5eeSXin LiFor consistency and simplicity reasons it’s best served omitting all optional 325*8c35d5eeSXin Litags, not just a selection.)</p> 326*8c35d5eeSXin Li 327*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 328*8c35d5eeSXin Li<!DOCTYPE html> 329*8c35d5eeSXin Li<html> 330*8c35d5eeSXin Li <head> 331*8c35d5eeSXin Li <title>Spending money, spending bytes</title> 332*8c35d5eeSXin Li </head> 333*8c35d5eeSXin Li <body> 334*8c35d5eeSXin Li <p>Sic.</p> 335*8c35d5eeSXin Li </body> 336*8c35d5eeSXin Li</html> 337*8c35d5eeSXin Li</code></pre> 338*8c35d5eeSXin Li 339*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 340*8c35d5eeSXin Li<!DOCTYPE html> 341*8c35d5eeSXin Li<title>Saving money, saving bytes</title> 342*8c35d5eeSXin Li<p>Qed. 343*8c35d5eeSXin Li</code></pre> 344*8c35d5eeSXin Li 345*8c35d5eeSXin Li<h4 id="type_Attributes">3.1.8 <code>type</code> Attributes</h4> 346*8c35d5eeSXin Li 347*8c35d5eeSXin Li<p>Omit <code>type</code> attributes for style sheets and scripts.</p> 348*8c35d5eeSXin Li 349*8c35d5eeSXin Li<p>Do not use <code>type</code> attributes for style sheets (unless not using CSS) and scripts 350*8c35d5eeSXin Li(unless not using JavaScript).</p> 351*8c35d5eeSXin Li 352*8c35d5eeSXin Li<p>Specifying <code>type</code> attributes in these contexts is not necessary as HTML5 implies 353*8c35d5eeSXin Li<a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-style-type"><code>text/css</code></a> 354*8c35d5eeSXin Liand <a href="https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a> 355*8c35d5eeSXin Lias defaults. This can be safely done even for older browsers.</p> 356*8c35d5eeSXin Li 357*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 358*8c35d5eeSXin Li<link rel="stylesheet" href="https://www.google.com/css/maia.css" 359*8c35d5eeSXin Li type="text/css"> 360*8c35d5eeSXin Li</code></pre> 361*8c35d5eeSXin Li 362*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 363*8c35d5eeSXin Li<link rel="stylesheet" href="https://www.google.com/css/maia.css"> 364*8c35d5eeSXin Li</code></pre> 365*8c35d5eeSXin Li 366*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 367*8c35d5eeSXin Li<script src="https://www.google.com/js/gweb/analytics/autotrack.js" 368*8c35d5eeSXin Li type="text/javascript"></script> 369*8c35d5eeSXin Li</code></pre> 370*8c35d5eeSXin Li 371*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 372*8c35d5eeSXin Li<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script> 373*8c35d5eeSXin Li</code></pre> 374*8c35d5eeSXin Li 375*8c35d5eeSXin Li<h3 id="HTML_Formatting_Rules">3.2 HTML Formatting Rules</h3> 376*8c35d5eeSXin Li 377*8c35d5eeSXin Li<h4 id="General_Formatting">3.2.1 General Formatting</h4> 378*8c35d5eeSXin Li 379*8c35d5eeSXin Li<p>Use a new line for every block, list, or table element, and indent every such 380*8c35d5eeSXin Lichild element.</p> 381*8c35d5eeSXin Li 382*8c35d5eeSXin Li<p>Independent of the styling of an element (as CSS allows elements to assume a 383*8c35d5eeSXin Lidifferent role per <code>display</code> property), put every block, list, or table element 384*8c35d5eeSXin Lion a new line.</p> 385*8c35d5eeSXin Li 386*8c35d5eeSXin Li<p>Also, indent them if they are child elements of a block, list, or table element.</p> 387*8c35d5eeSXin Li 388*8c35d5eeSXin Li<p>(If you run into issues around whitespace between list items it’s acceptable to 389*8c35d5eeSXin Liput all <code>li</code> elements in one line. A linter is encouraged to throw a warning 390*8c35d5eeSXin Liinstead of an error.)</p> 391*8c35d5eeSXin Li 392*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><blockquote> 393*8c35d5eeSXin Li <p><em>Space</em>, the final frontier.</p> 394*8c35d5eeSXin Li</blockquote> 395*8c35d5eeSXin Li</code></pre> 396*8c35d5eeSXin Li 397*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><ul> 398*8c35d5eeSXin Li <li>Moe 399*8c35d5eeSXin Li <li>Larry 400*8c35d5eeSXin Li <li>Curly 401*8c35d5eeSXin Li</ul> 402*8c35d5eeSXin Li</code></pre> 403*8c35d5eeSXin Li 404*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><table> 405*8c35d5eeSXin Li <thead> 406*8c35d5eeSXin Li <tr> 407*8c35d5eeSXin Li <th scope="col">Income 408*8c35d5eeSXin Li <th scope="col">Taxes 409*8c35d5eeSXin Li <tbody> 410*8c35d5eeSXin Li <tr> 411*8c35d5eeSXin Li <td>$ 5.00 412*8c35d5eeSXin Li <td>$ 4.50 413*8c35d5eeSXin Li</table> 414*8c35d5eeSXin Li</code></pre> 415*8c35d5eeSXin Li 416*8c35d5eeSXin Li<h4 id="HTML_Line-Wrapping">3.2.2 HTML Line-Wrapping</h4> 417*8c35d5eeSXin Li 418*8c35d5eeSXin Li<p>Break long lines (optional).</p> 419*8c35d5eeSXin Li 420*8c35d5eeSXin Li<p>While there is no column limit recommendation for HTML, you may consider 421*8c35d5eeSXin Liwrapping long lines if it significantly improves readability.</p> 422*8c35d5eeSXin Li 423*8c35d5eeSXin Li<p>When line-wrapping, each continuation line should be indented at least 4 424*8c35d5eeSXin Liadditional spaces from the original line.</p> 425*8c35d5eeSXin Li 426*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><md-progress-circular md-mode="indeterminate" class="md-accent" 427*8c35d5eeSXin Li ng-show="ctrl.loading" md-diameter="35"> 428*8c35d5eeSXin Li</md-progress-circular> 429*8c35d5eeSXin Li</code></pre> 430*8c35d5eeSXin Li 431*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><md-progress-circular 432*8c35d5eeSXin Li md-mode="indeterminate" 433*8c35d5eeSXin Li class="md-accent" 434*8c35d5eeSXin Li ng-show="ctrl.loading" 435*8c35d5eeSXin Li md-diameter="35"> 436*8c35d5eeSXin Li</md-progress-circular> 437*8c35d5eeSXin Li</code></pre> 438*8c35d5eeSXin Li 439*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><md-progress-circular md-mode="indeterminate" 440*8c35d5eeSXin Li class="md-accent" 441*8c35d5eeSXin Li ng-show="ctrl.loading" 442*8c35d5eeSXin Li md-diameter="35"> 443*8c35d5eeSXin Li</md-progress-circular> 444*8c35d5eeSXin Li</code></pre> 445*8c35d5eeSXin Li 446*8c35d5eeSXin Li<h4 id="HTML_Quotation_Marks">3.2.3 HTML Quotation Marks</h4> 447*8c35d5eeSXin Li 448*8c35d5eeSXin Li<p>When quoting attributes values, use double quotation marks.</p> 449*8c35d5eeSXin Li 450*8c35d5eeSXin Li<p>Use double (<code>""</code>) rather than single quotation marks (<code>''</code>) around attribute 451*8c35d5eeSXin Livalues.</p> 452*8c35d5eeSXin Li 453*8c35d5eeSXin Li<pre><code class="language-html prettyprint badcode"><!-- Not recommended --> 454*8c35d5eeSXin Li<a class='maia-button maia-button-secondary'>Sign in</a> 455*8c35d5eeSXin Li</code></pre> 456*8c35d5eeSXin Li 457*8c35d5eeSXin Li<pre><code class="language-html prettyprint"><!-- Recommended --> 458*8c35d5eeSXin Li<a class="maia-button maia-button-secondary">Sign in</a> 459*8c35d5eeSXin Li</code></pre> 460*8c35d5eeSXin Li 461*8c35d5eeSXin Li<h2 id="CSS">4 CSS</h2> 462*8c35d5eeSXin Li 463*8c35d5eeSXin Li<h3 id="CSS_Style_Rules">4.1 CSS Style Rules</h3> 464*8c35d5eeSXin Li 465*8c35d5eeSXin Li<h4 id="CSS_Validity">4.1.1 CSS Validity</h4> 466*8c35d5eeSXin Li 467*8c35d5eeSXin Li<p>Use valid CSS where possible.</p> 468*8c35d5eeSXin Li 469*8c35d5eeSXin Li<p>Unless dealing with CSS validator bugs or requiring proprietary syntax, use 470*8c35d5eeSXin Livalid CSS code.</p> 471*8c35d5eeSXin Li 472*8c35d5eeSXin Li<p> 473*8c35d5eeSXin Li 474*8c35d5eeSXin LiUse tools such as the <a href="https://jigsaw.w3.org/css-validator/">W3C CSS validator</a> 475*8c35d5eeSXin Lito test. 476*8c35d5eeSXin Li</p> 477*8c35d5eeSXin Li 478*8c35d5eeSXin Li<p>Using valid CSS is a measurable baseline quality attribute that allows to spot 479*8c35d5eeSXin LiCSS code that may not have any effect and can be removed, and that ensures 480*8c35d5eeSXin Liproper CSS usage.</p> 481*8c35d5eeSXin Li 482*8c35d5eeSXin Li<h4 id="ID_and_Class_Naming">4.1.2 ID and Class Naming</h4> 483*8c35d5eeSXin Li 484*8c35d5eeSXin Li<p>Use meaningful or generic ID and class names.</p> 485*8c35d5eeSXin Li 486*8c35d5eeSXin Li<p>Instead of presentational or cryptic names, always use ID and class names that 487*8c35d5eeSXin Lireflect the purpose of the element in question, or that are otherwise generic.</p> 488*8c35d5eeSXin Li 489*8c35d5eeSXin Li<p>Names that are specific and reflect the purpose of the element should be 490*8c35d5eeSXin Lipreferred as these are most understandable and the least likely to change.</p> 491*8c35d5eeSXin Li 492*8c35d5eeSXin Li<p>Generic names are simply a fallback for elements that have no particular or no 493*8c35d5eeSXin Limeaning different from their siblings. They are typically needed as “helpers.”</p> 494*8c35d5eeSXin Li 495*8c35d5eeSXin Li<p>Using functional or generic names reduces the probability of unnecessary 496*8c35d5eeSXin Lidocument or template changes.</p> 497*8c35d5eeSXin Li 498*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended: meaningless */ 499*8c35d5eeSXin Li#yee-1901 {} 500*8c35d5eeSXin Li 501*8c35d5eeSXin Li/* Not recommended: presentational */ 502*8c35d5eeSXin Li.button-green {} 503*8c35d5eeSXin Li.clear {} 504*8c35d5eeSXin Li</code></pre> 505*8c35d5eeSXin Li 506*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended: specific */ 507*8c35d5eeSXin Li#gallery {} 508*8c35d5eeSXin Li#login {} 509*8c35d5eeSXin Li.video {} 510*8c35d5eeSXin Li 511*8c35d5eeSXin Li/* Recommended: generic */ 512*8c35d5eeSXin Li.aux {} 513*8c35d5eeSXin Li.alt {} 514*8c35d5eeSXin Li</code></pre> 515*8c35d5eeSXin Li 516*8c35d5eeSXin Li<h4 id="ID_and_Class_Name_Style">4.1.3 ID and Class Name Style</h4> 517*8c35d5eeSXin Li 518*8c35d5eeSXin Li<p>Use ID and class names that are as short as possible but as long as necessary.</p> 519*8c35d5eeSXin Li 520*8c35d5eeSXin Li<p>Try to convey what an ID or class is about while being as brief as possible.</p> 521*8c35d5eeSXin Li 522*8c35d5eeSXin Li<p>Using ID and class names this way contributes to acceptable levels of 523*8c35d5eeSXin Liunderstandability and code efficiency.</p> 524*8c35d5eeSXin Li 525*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 526*8c35d5eeSXin Li#navigation {} 527*8c35d5eeSXin Li.atr {} 528*8c35d5eeSXin Li</code></pre> 529*8c35d5eeSXin Li 530*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 531*8c35d5eeSXin Li#nav {} 532*8c35d5eeSXin Li.author {} 533*8c35d5eeSXin Li</code></pre> 534*8c35d5eeSXin Li 535*8c35d5eeSXin Li<h4 id="Type_Selectors">4.1.4 Type Selectors</h4> 536*8c35d5eeSXin Li 537*8c35d5eeSXin Li<p>Avoid qualifying ID and class names with type selectors.</p> 538*8c35d5eeSXin Li 539*8c35d5eeSXin Li<p>Unless necessary (for example with helper classes), do not use element names in 540*8c35d5eeSXin Liconjunction with IDs or classes.</p> 541*8c35d5eeSXin Li 542*8c35d5eeSXin Li<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> 543*8c35d5eeSXin Li 544*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 545*8c35d5eeSXin Liul#example {} 546*8c35d5eeSXin Lidiv.error {} 547*8c35d5eeSXin Li</code></pre> 548*8c35d5eeSXin Li 549*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 550*8c35d5eeSXin Li#example {} 551*8c35d5eeSXin Li.error {} 552*8c35d5eeSXin Li</code></pre> 553*8c35d5eeSXin Li 554*8c35d5eeSXin Li<h4 id="Shorthand_Properties">4.1.5 Shorthand Properties</h4> 555*8c35d5eeSXin Li 556*8c35d5eeSXin Li<p>Use shorthand properties where possible.</p> 557*8c35d5eeSXin Li 558*8c35d5eeSXin Li<p>CSS offers a variety of <a href="https://www.w3.org/TR/CSS21/about.html#shorthand">shorthand</a> 559*8c35d5eeSXin Liproperties (like <code>font</code>) that should be used whenever possible, even in cases 560*8c35d5eeSXin Liwhere only one value is explicitly set.</p> 561*8c35d5eeSXin Li 562*8c35d5eeSXin Li<p>Using shorthand properties is useful for code efficiency and understandability.</p> 563*8c35d5eeSXin Li 564*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 565*8c35d5eeSXin Liborder-top-style: none; 566*8c35d5eeSXin Lifont-family: palatino, georgia, serif; 567*8c35d5eeSXin Lifont-size: 100%; 568*8c35d5eeSXin Liline-height: 1.6; 569*8c35d5eeSXin Lipadding-bottom: 2em; 570*8c35d5eeSXin Lipadding-left: 1em; 571*8c35d5eeSXin Lipadding-right: 1em; 572*8c35d5eeSXin Lipadding-top: 0; 573*8c35d5eeSXin Li</code></pre> 574*8c35d5eeSXin Li 575*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 576*8c35d5eeSXin Liborder-top: 0; 577*8c35d5eeSXin Lifont: 100%/1.6 palatino, georgia, serif; 578*8c35d5eeSXin Lipadding: 0 1em 2em; 579*8c35d5eeSXin Li</code></pre> 580*8c35d5eeSXin Li 581*8c35d5eeSXin Li<h4 id="0_and_Units">4.1.6 0 and Units</h4> 582*8c35d5eeSXin Li 583*8c35d5eeSXin Li<p>Omit unit specification after “0” values, unless required.</p> 584*8c35d5eeSXin Li 585*8c35d5eeSXin Li<p>Do not use units after <code>0</code> values unless they are required.</p> 586*8c35d5eeSXin Li 587*8c35d5eeSXin Li<pre><code class="language-css prettyprint">flex: 0px; /* This flex-basis component requires a unit. */ 588*8c35d5eeSXin Liflex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */ 589*8c35d5eeSXin Limargin: 0; 590*8c35d5eeSXin Lipadding: 0; 591*8c35d5eeSXin Li</code></pre> 592*8c35d5eeSXin Li 593*8c35d5eeSXin Li<h4 id="Leading_0s">4.1.7 Leading 0s</h4> 594*8c35d5eeSXin Li 595*8c35d5eeSXin Li<p>Omit leading “0”s in values.</p> 596*8c35d5eeSXin Li 597*8c35d5eeSXin Li<p>Do not put <code>0</code>s in front of values or lengths between -1 and 1.</p> 598*8c35d5eeSXin Li 599*8c35d5eeSXin Li<pre><code class="language-css prettyprint">font-size: .8em; 600*8c35d5eeSXin Li</code></pre> 601*8c35d5eeSXin Li 602*8c35d5eeSXin Li<h4 id="Hexadecimal_Notation">4.1.8 Hexadecimal Notation</h4> 603*8c35d5eeSXin Li 604*8c35d5eeSXin Li<p>Use 3 character hexadecimal notation where possible.</p> 605*8c35d5eeSXin Li 606*8c35d5eeSXin Li<p>For color values that permit it, 3 character hexadecimal notation is shorter and 607*8c35d5eeSXin Limore succinct.</p> 608*8c35d5eeSXin Li 609*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 610*8c35d5eeSXin Licolor: #eebbcc; 611*8c35d5eeSXin Li</code></pre> 612*8c35d5eeSXin Li 613*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 614*8c35d5eeSXin Licolor: #ebc; 615*8c35d5eeSXin Li</code></pre> 616*8c35d5eeSXin Li 617*8c35d5eeSXin Li<h4 id="Prefixes">4.1.9 Prefixes</h4> 618*8c35d5eeSXin Li 619*8c35d5eeSXin Li<p>Prefix selectors with an application-specific prefix (optional).</p> 620*8c35d5eeSXin Li 621*8c35d5eeSXin Li<p>In large projects as well as for code that gets embedded in other projects or on 622*8c35d5eeSXin Liexternal sites use prefixes (as namespaces) for ID and class names. Use short, 623*8c35d5eeSXin Liunique identifiers followed by a dash.</p> 624*8c35d5eeSXin Li 625*8c35d5eeSXin Li<p>Using namespaces helps preventing naming conflicts and can make maintenance 626*8c35d5eeSXin Lieasier, for example in search and replace operations.</p> 627*8c35d5eeSXin Li 628*8c35d5eeSXin Li<pre><code class="language-css prettyprint">.adw-help {} /* AdWords */ 629*8c35d5eeSXin Li#maia-note {} /* Maia */ 630*8c35d5eeSXin Li</code></pre> 631*8c35d5eeSXin Li 632*8c35d5eeSXin Li<h4 id="ID_and_Class_Name_Delimiters">4.1.10 ID and Class Name Delimiters</h4> 633*8c35d5eeSXin Li 634*8c35d5eeSXin Li<p>Separate words in ID and class names by a hyphen.</p> 635*8c35d5eeSXin Li 636*8c35d5eeSXin Li<p>Do not concatenate words and abbreviations in selectors by any characters 637*8c35d5eeSXin Li(including none at all) other than hyphens, in order to improve understanding 638*8c35d5eeSXin Liand scannability.</p> 639*8c35d5eeSXin Li 640*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended: does not separate the words “demo” and “image” */ 641*8c35d5eeSXin Li.demoimage {} 642*8c35d5eeSXin Li 643*8c35d5eeSXin Li/* Not recommended: uses underscore instead of hyphen */ 644*8c35d5eeSXin Li.error_status {} 645*8c35d5eeSXin Li</code></pre> 646*8c35d5eeSXin Li 647*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 648*8c35d5eeSXin Li#video-id {} 649*8c35d5eeSXin Li.ads-sample {} 650*8c35d5eeSXin Li</code></pre> 651*8c35d5eeSXin Li 652*8c35d5eeSXin Li<h4 id="Hacks">4.1.11 Hacks</h4> 653*8c35d5eeSXin Li 654*8c35d5eeSXin Li<p>Avoid user agent detection as well as CSS “hacks”—try a different approach 655*8c35d5eeSXin Lifirst.</p> 656*8c35d5eeSXin Li 657*8c35d5eeSXin Li<p>It’s tempting to address styling differences over user agent detection or 658*8c35d5eeSXin Lispecial CSS filters, workarounds, and hacks. Both approaches should be 659*8c35d5eeSXin Liconsidered last resort in order to achieve and maintain an efficient and 660*8c35d5eeSXin Limanageable code base. Put another way, giving detection and hacks a free pass 661*8c35d5eeSXin Liwill hurt projects in the long run as projects tend to take the way of least 662*8c35d5eeSXin Liresistance. That is, allowing and making it easy to use detection and hacks 663*8c35d5eeSXin Limeans using detection and hacks more frequently—and more frequently is too 664*8c35d5eeSXin Lifrequently.</p> 665*8c35d5eeSXin Li 666*8c35d5eeSXin Li<h3 id="CSS_Formatting_Rules">4.2 CSS Formatting Rules</h3> 667*8c35d5eeSXin Li 668*8c35d5eeSXin Li<h4 id="Declaration_Order">4.2.1 Declaration Order</h4> 669*8c35d5eeSXin Li 670*8c35d5eeSXin Li<p>Alphabetize declarations.</p> 671*8c35d5eeSXin Li 672*8c35d5eeSXin Li<p>Put declarations in alphabetical order in order to achieve consistent code in a 673*8c35d5eeSXin Liway that is easy to remember and maintain.</p> 674*8c35d5eeSXin Li 675*8c35d5eeSXin Li<p>Ignore vendor-specific prefixes for sorting purposes. However, multiple 676*8c35d5eeSXin Livendor-specific prefixes for a certain CSS property should be kept sorted (e.g. 677*8c35d5eeSXin Li-moz prefix comes before -webkit).</p> 678*8c35d5eeSXin Li 679*8c35d5eeSXin Li<pre><code class="language-css prettyprint">background: fuchsia; 680*8c35d5eeSXin Liborder: 1px solid; 681*8c35d5eeSXin Li-moz-border-radius: 4px; 682*8c35d5eeSXin Li-webkit-border-radius: 4px; 683*8c35d5eeSXin Liborder-radius: 4px; 684*8c35d5eeSXin Licolor: black; 685*8c35d5eeSXin Litext-align: center; 686*8c35d5eeSXin Litext-indent: 2em; 687*8c35d5eeSXin Li</code></pre> 688*8c35d5eeSXin Li 689*8c35d5eeSXin Li<h4 id="Block_Content_Indentation">4.2.2 Block Content Indentation</h4> 690*8c35d5eeSXin Li 691*8c35d5eeSXin Li<p>Indent all block content.</p> 692*8c35d5eeSXin Li 693*8c35d5eeSXin Li<p>Indent all <a href="https://www.w3.org/TR/CSS21/syndata.html#block">block content</a>, 694*8c35d5eeSXin Lithat is rules within rules as well as declarations, so to reflect hierarchy and 695*8c35d5eeSXin Liimprove understanding.</p> 696*8c35d5eeSXin Li 697*8c35d5eeSXin Li<pre><code class="language-css prettyprint">@media screen, projection { 698*8c35d5eeSXin Li 699*8c35d5eeSXin Li html { 700*8c35d5eeSXin Li background: #fff; 701*8c35d5eeSXin Li color: #444; 702*8c35d5eeSXin Li } 703*8c35d5eeSXin Li 704*8c35d5eeSXin Li} 705*8c35d5eeSXin Li</code></pre> 706*8c35d5eeSXin Li 707*8c35d5eeSXin Li<h4 id="Declaration_Stops">4.2.3 Declaration Stops</h4> 708*8c35d5eeSXin Li 709*8c35d5eeSXin Li<p>Use a semicolon after every declaration.</p> 710*8c35d5eeSXin Li 711*8c35d5eeSXin Li<p>End every declaration with a semicolon for consistency and extensibility 712*8c35d5eeSXin Lireasons.</p> 713*8c35d5eeSXin Li 714*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 715*8c35d5eeSXin Li.test { 716*8c35d5eeSXin Li display: block; 717*8c35d5eeSXin Li height: 100px 718*8c35d5eeSXin Li} 719*8c35d5eeSXin Li</code></pre> 720*8c35d5eeSXin Li 721*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 722*8c35d5eeSXin Li.test { 723*8c35d5eeSXin Li display: block; 724*8c35d5eeSXin Li height: 100px; 725*8c35d5eeSXin Li} 726*8c35d5eeSXin Li</code></pre> 727*8c35d5eeSXin Li 728*8c35d5eeSXin Li<h4 id="Property_Name_Stops">4.2.4 Property Name Stops</h4> 729*8c35d5eeSXin Li 730*8c35d5eeSXin Li<p>Use a space after a property name’s colon.</p> 731*8c35d5eeSXin Li 732*8c35d5eeSXin Li<p>Always use a single space between property and value (but no space between 733*8c35d5eeSXin Liproperty and colon) for consistency reasons.</p> 734*8c35d5eeSXin Li 735*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 736*8c35d5eeSXin Lih3 { 737*8c35d5eeSXin Li font-weight:bold; 738*8c35d5eeSXin Li} 739*8c35d5eeSXin Li</code></pre> 740*8c35d5eeSXin Li 741*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 742*8c35d5eeSXin Lih3 { 743*8c35d5eeSXin Li font-weight: bold; 744*8c35d5eeSXin Li} 745*8c35d5eeSXin Li</code></pre> 746*8c35d5eeSXin Li 747*8c35d5eeSXin Li<h4 id="Declaration_Block_Separation">4.2.5 Declaration Block Separation</h4> 748*8c35d5eeSXin Li 749*8c35d5eeSXin Li<p>Use a space between the last selector and the declaration block.</p> 750*8c35d5eeSXin Li 751*8c35d5eeSXin Li<p>Always use a single space between the last selector and the opening brace that 752*8c35d5eeSXin Libegins the <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">declaration block</a>.</p> 753*8c35d5eeSXin Li 754*8c35d5eeSXin Li<p>The opening brace should be on the same line as the last selector in a given 755*8c35d5eeSXin Lirule.</p> 756*8c35d5eeSXin Li 757*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended: missing space */ 758*8c35d5eeSXin Li#video{ 759*8c35d5eeSXin Li margin-top: 1em; 760*8c35d5eeSXin Li} 761*8c35d5eeSXin Li 762*8c35d5eeSXin Li/* Not recommended: unnecessary line break */ 763*8c35d5eeSXin Li#video 764*8c35d5eeSXin Li{ 765*8c35d5eeSXin Li margin-top: 1em; 766*8c35d5eeSXin Li} 767*8c35d5eeSXin Li</code></pre> 768*8c35d5eeSXin Li 769*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 770*8c35d5eeSXin Li#video { 771*8c35d5eeSXin Li margin-top: 1em; 772*8c35d5eeSXin Li} 773*8c35d5eeSXin Li</code></pre> 774*8c35d5eeSXin Li 775*8c35d5eeSXin Li<h4 id="Selector_and_Declaration_Separation">4.2.6 Selector and Declaration Separation</h4> 776*8c35d5eeSXin Li 777*8c35d5eeSXin Li<p>Separate selectors and declarations by new lines.</p> 778*8c35d5eeSXin Li 779*8c35d5eeSXin Li<p>Always start a new line for each selector and declaration.</p> 780*8c35d5eeSXin Li 781*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 782*8c35d5eeSXin Lia:focus, a:active { 783*8c35d5eeSXin Li position: relative; top: 1px; 784*8c35d5eeSXin Li} 785*8c35d5eeSXin Li</code></pre> 786*8c35d5eeSXin Li 787*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 788*8c35d5eeSXin Lih1, 789*8c35d5eeSXin Lih2, 790*8c35d5eeSXin Lih3 { 791*8c35d5eeSXin Li font-weight: normal; 792*8c35d5eeSXin Li line-height: 1.2; 793*8c35d5eeSXin Li} 794*8c35d5eeSXin Li</code></pre> 795*8c35d5eeSXin Li 796*8c35d5eeSXin Li<h4 id="Rule_Separation">4.2.7 Rule Separation</h4> 797*8c35d5eeSXin Li 798*8c35d5eeSXin Li<p>Separate rules by new lines.</p> 799*8c35d5eeSXin Li 800*8c35d5eeSXin Li<p>Always put a blank line (two line breaks) between rules.</p> 801*8c35d5eeSXin Li 802*8c35d5eeSXin Li<pre><code class="language-css prettyprint">html { 803*8c35d5eeSXin Li background: #fff; 804*8c35d5eeSXin Li} 805*8c35d5eeSXin Li 806*8c35d5eeSXin Libody { 807*8c35d5eeSXin Li margin: auto; 808*8c35d5eeSXin Li width: 50%; 809*8c35d5eeSXin Li} 810*8c35d5eeSXin Li</code></pre> 811*8c35d5eeSXin Li 812*8c35d5eeSXin Li<h4 id="CSS_Quotation_Marks">4.2.8 CSS Quotation Marks</h4> 813*8c35d5eeSXin Li 814*8c35d5eeSXin Li<p>Use single (<code>''</code>) rather than double (<code>""</code>) quotation marks for attribute 815*8c35d5eeSXin Liselectors and property values.</p> 816*8c35d5eeSXin Li 817*8c35d5eeSXin Li<p>Do not use quotation marks in URI values (<code>url()</code>).</p> 818*8c35d5eeSXin Li 819*8c35d5eeSXin Li<p>Exception: If you do need to use the <code>@charset</code> rule, use double quotation 820*8c35d5eeSXin Limarks—<a href="https://www.w3.org/TR/CSS21/syndata.html#charset">single quotation marks are not permitted</a>.</p> 821*8c35d5eeSXin Li 822*8c35d5eeSXin Li<pre><code class="language-css prettyprint badcode">/* Not recommended */ 823*8c35d5eeSXin Li@import url("https://www.google.com/css/maia.css"); 824*8c35d5eeSXin Li 825*8c35d5eeSXin Lihtml { 826*8c35d5eeSXin Li font-family: "open sans", arial, sans-serif; 827*8c35d5eeSXin Li} 828*8c35d5eeSXin Li</code></pre> 829*8c35d5eeSXin Li 830*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Recommended */ 831*8c35d5eeSXin Li@import url(https://www.google.com/css/maia.css); 832*8c35d5eeSXin Li 833*8c35d5eeSXin Lihtml { 834*8c35d5eeSXin Li font-family: 'open sans', arial, sans-serif; 835*8c35d5eeSXin Li} 836*8c35d5eeSXin Li</code></pre> 837*8c35d5eeSXin Li 838*8c35d5eeSXin Li<h3 id="CSS_Meta_Rules">4.3 CSS Meta Rules</h3> 839*8c35d5eeSXin Li 840*8c35d5eeSXin Li<h4 id="Section_Comments">4.3.1 Section Comments</h4> 841*8c35d5eeSXin Li 842*8c35d5eeSXin Li<p>Group sections by a section comment (optional).</p> 843*8c35d5eeSXin Li 844*8c35d5eeSXin Li<p>If possible, group style sheet sections together by using comments. Separate 845*8c35d5eeSXin Lisections with new lines.</p> 846*8c35d5eeSXin Li 847*8c35d5eeSXin Li<pre><code class="language-css prettyprint">/* Header */ 848*8c35d5eeSXin Li 849*8c35d5eeSXin Li#adw-header {} 850*8c35d5eeSXin Li 851*8c35d5eeSXin Li/* Footer */ 852*8c35d5eeSXin Li 853*8c35d5eeSXin Li#adw-footer {} 854*8c35d5eeSXin Li 855*8c35d5eeSXin Li/* Gallery */ 856*8c35d5eeSXin Li 857*8c35d5eeSXin Li.adw-gallery {} 858*8c35d5eeSXin Li</code></pre> 859*8c35d5eeSXin Li 860*8c35d5eeSXin Li<h2 id="Parting_Words">Parting Words</h2> 861*8c35d5eeSXin Li 862*8c35d5eeSXin Li<p><em>Be consistent.</em></p> 863*8c35d5eeSXin Li 864*8c35d5eeSXin Li<p>If you’re editing code, take a few minutes to look at the code around you and 865*8c35d5eeSXin Lidetermine its style. If they use spaces around all their arithmetic operators, 866*8c35d5eeSXin Liyou should too. If their comments have little boxes of hash marks around them, 867*8c35d5eeSXin Limake your comments have little boxes of hash marks around them too.</p> 868*8c35d5eeSXin Li 869*8c35d5eeSXin Li<p>The point of having style guidelines is to have a common vocabulary of coding so 870*8c35d5eeSXin Lipeople can concentrate on what you’re saying rather than on how you’re saying 871*8c35d5eeSXin Liit. We present global style rules here so people know the vocabulary, but local 872*8c35d5eeSXin Listyle is also important. If code you add to a file looks drastically different 873*8c35d5eeSXin Lifrom the existing code around it, it throws readers out of their rhythm when 874*8c35d5eeSXin Lithey go to read it. Avoid this.</p> 875*8c35d5eeSXin Li</div> 876*8c35d5eeSXin Li</body> 877*8c35d5eeSXin Li</html> 878
