Code Guide pen

HTML

              
                <header class="masthead">
  <div class="container">
    <span class="icon">&#9997;</span>
    <h1>Code Guide by @mdo</h1>
    <p class="lead">Standards for developing flexible, durable, and sustainable HTML and CSS.</p>

    <p class="masthead-links">
      <a href="https://github.com/mdo/code-guide">
        <span class="icon icon-github-circled"></span>
      </a>
      <a href="https://twitter.com/mdo">
        <span class="icon icon-twitter"></span>
      </a>
    </p>

    <script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=codeguide" id="_fusionads_js"></script>
  </div>
</header>


<div class="heading" id="toc">
  <h2>Table of contents</h2>
</div>
<div class="section toc">
  <div class="col">
    <h4><a href="#html">HTML</a></h4>
    <ul>
      <li><a href="#html-syntax">Syntax</a></li>
      <li><a href="#html-doctype">HTML5 doctype</a></li>
      <li><a href="#html-lang">Language attribute</a></li>
      <li><a href="#html-encoding">Character encoding</a></li>
      <li><a href="#html-ie-compatibility-mode">Internet Explorer compatibility mode</a></li>
      <li><a href="#html-style-script">CSS and JavaScript includes</a></li>
      <li><a href="#html-practicality">Practicality over purity</a></li>
      <li><a href="#html-attribute-order">Attribute order</a></li>
      <li><a href="#html-boolean-attributes">Boolean attributes</a></li>
      <li><a href="#html-reducing-markup">Reducing markup</a></li>
      <li><a href="#html-javascript">JavaScript generated markup</a></li>
    </ul>
  </div>
  <div class="col">
    <h4><a href="#css">CSS</a></h4>
    <ul>
      <li><a href="#css-syntax">CSS syntax</a></li>
      <li><a href="#css-declaration-order">Declaration order</a></li>
      <li><a href="#css-import">Don't use @import</a></li>
      <li><a href="#css-media-queries">Media query placement</a></li>
      <li><a href="#css-prefixed-properties">Prefixed properties</a></li>
      <li><a href="#css-single-declarations">Rules with single declarations</a></li>
      <li><a href="#css-shorthand">Shorthand notation</a></li>
      <li><a href="#css-nesting">Nesting in Less and Sass</a></li>
      <li><a href="#css-operators">Operators in Less and Sass</a></li>
      <li><a href="#css-comments">Comments</a></li>
      <li><a href="#css-classes">Classes</a></li>
      <li><a href="#css-selectors">Selectors</a></li>
      <li><a href="#css-organization">Organization</a></li>
    </ul>
  </div>
</div>


<div class="section" id="golden-rule">
  <div class="col">
    <h2>Golden rule</h2>
    <p>Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect. For additions or contributions to this Code Guide, please <a href="https://github.com/mdo/code-guide/issues/new">open an issue on GitHub</a>.</p>
  </div>
  <div class="col">
    <blockquote>
      <p>Every line of code should appear to be written by a single person, no matter the number of contributors.</p>
    </blockquote>
  </div>
</div>


<div class="heading" id="html">
  <h2>HTML</h2>
</div>

<div class="section" id="html-syntax">
  <div class="col">
    <h3>Syntax</h3>
    <ul>
      <li>Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.</li>
      <li>Nested elements should be indented once (two spaces).</li>
      <li>Always use double quotes, never single quotes, on attributes.</li>
      <li>Don't include a trailing slash in self-closing elements—the <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 spec</a> says they're optional.</li>
      <li>Don’t omit optional closing tags (e.g. <code>&lt;/li&gt;</code> or <code>&lt;/body&gt;</code>).</li>
    </ul>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Page title<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;images/company-logo.png&quot;</span> <span class="na">alt=</span><span class="s">&quot;Company&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;hello-world&quot;</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-doctype">
  <div class="col">
    <h3>HTML5 doctype</h3>
    <p>Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-lang">
  <div class="col">
    <h3>Language attribute</h3>
    <p>From the HTML5 spec:</p>
    <blockquote>
      <p>Authors are encouraged to specify a lang attribute on the root html element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.</p>
    </blockquote>
    <p>Read more about the <code>lang</code> attribute <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">in the spec</a>.</p>
    <p>Head to Sitepoint for a <a href="http://reference.sitepoint.com/html/lang-codes">list of language codes</a>.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en-us&quot;</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- ... --&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-ie-compatibility-mode">
  <div class="col">
    <h3>IE compatibility mode</h3>
    <p>Internet Explorer supports the use of a document compatibility <code>&lt;meta&gt;</code> tag to specify what version of IE the page should be rendered as. Unless circumstances require otherwise, it's most useful to instruct IE to use the latest supported
      mode with <strong>edge mode</strong>.</p>
    <p>For more information, <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">read this awesome Stack Overflow article</a>.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=Edge&quot;</span><span class="nt">&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-encoding">
  <div class="col">
    <h3>Character encoding</h3>
    <p>Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding. When doing so, you may avoid using character entities in your HTML, provided their encoding matches that of the document (generally UTF-8).</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;UTF-8&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-style-script">
  <div class="col">
    <h3>CSS and JavaScript includes</h3>
    <p>Per HTML5 spec, typically there is no need to specify a <code>type</code> when including CSS and JavaScript files as <code>text/css</code> and <code>text/javascript</code> are their respective defaults.</p>
    <h4>HTML5 spec links</h4>
    <ul>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">Using link</a></li>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">Using style</a></li>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Using script</a></li>
    </ul>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- External CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;code-guide.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- In-document CSS --&gt;</span>
<span class="nt">&lt;style&gt;</span>
  <span class="c">/* ... */</span>
<span class="nt">&lt;/style&gt;</span>

<span class="c">&lt;!-- JavaScript --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;code-guide.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-practicality">
  <div class="col">
    <h3>Practicality over purity</h3>
    <p>Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.</p>
  </div>
</div>

<div class="section" id="html-attribute-order">
  <div class="col">
    <h3>Attribute order</h3>
    <p>HTML attributes should come in this particular order for easier reading of code.</p>
    <ul>
      <li><code>class</code></li>
      <li><code>id</code>, <code>name</code></li>
      <li><code>data-*</code></li>
      <li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code>, <code>value</code></li>
      <li><code>title</code>, <code>alt</code></li>
      <li><code>aria-*</code>, <code>role</code></li>
    </ul>
    <p>Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;...&quot;</span> <span class="na">id=</span><span class="s">&quot;...&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;modal&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
  Example link
<span class="nt">&lt;/a&gt;</span>

<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span><span class="nt">&gt;</span>

<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span> <span class="na">alt=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-boolean-attributes">
  <div class="col">
    <h3>Boolean attributes</h3>
    <p>A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.</p>
    <p>For further reading, consult the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">WhatWG section on boolean attributes</a>:</p>
    <blockquote>
      <p>The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.</p>
    </blockquote>
    <p>If you <em>must</em> include the attribute's value, and <strong>you don't need to</strong>, follow this WhatWG guideline:</p>
    <blockquote>
      <p>If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.</p>
    </blockquote>
    <p><strong>In short, don't add a value.</strong></p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">disabled</span><span class="nt">&gt;</span>

<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">value=</span><span class="s">&quot;1&quot;</span> <span class="na">checked</span><span class="nt">&gt;</span>

<span class="nt">&lt;select&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;1&quot;</span> <span class="na">selected</span><span class="nt">&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-reducing-markup">
  <div class="col">
    <h3>Reducing markup</h3>
    <p>Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Not so great --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;avatar&quot;</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>

<span class="c">&lt;!-- Better --&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;avatar&quot;</span> <span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="html-javascript">
  <div class="col">
    <h3>JavaScript generated markup</h3>
    <p>Writing markup in a JavaScript file makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible.</p>
  </div>
</div>


<div class="heading" id="css">
  <h2>CSS</h2>
</div>

<div class="section" id="css-syntax">
  <div class="col">
    <h3>Syntax</h3>
    <ul>
      <li>Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.</li>
      <li>When grouping selectors, keep individual selectors to a single line.</li>
      <li>Include one space before the opening brace of declaration blocks for legibility.</li>
      <li>Place closing braces of declaration blocks on a new line.</li>
      <li>Include one space after <code>:</code> for each declaration.</li>
      <li>Each declaration should appear on its own line for more accurate error reporting.</li>
      <li>End all declarations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.</li>
      <li>Comma-separated property values should include a space after each comma (e.g., <code>box-shadow</code>).</li>
      <li>Don't include spaces after commas <em>within</em> <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>, or <code>rect()</code> values. This helps differentiate multiple color values (comma, no space) from multiple property
        values (comma with space).</li>
      <li>Don't prefix property values or color parameters with a leading zero (e.g., <code>.5</code> instead of <code>0.5</code> and <code>-.5px</code> instead of <code>-0.5px</code>).</li>
      <li>Lowercase all hex values, e.g., <code>#fff</code>. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes.</li>
      <li>Use shorthand hex values where available, e.g., <code>#fff</code> instead of <code>#ffffff</code>.</li>
      <li>Quote attribute values in selectors, e.g., <code>input[type="text"]</code>. <a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">They’re only optional in some cases</a>, and it’s a good practice for consistency.</li>
      <li>Avoid specifying units for zero values, e.g., <code>margin: 0;</code> instead of <code>margin: 0px;</code>.</li>
    </ul>
    <p>Questions on the terms used here? See the <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax">syntax section of the Cascading Style Sheets article</a> on Wikipedia.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Bad CSS */</span>
<span class="nc">.selector</span><span class="o">,</span> <span class="nc">.selector-secondary</span><span class="o">,</span> <span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">padding</span><span class="o">:</span><span class="m">15px</span><span class="p">;</span>
  <span class="k">margin</span><span class="o">:</span><span class="m">0px</span> <span class="m">0px</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
  <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span><span class="m">0px</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#CCC</span><span class="o">,</span><span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#FFFFFF</span>
<span class="p">}</span>

<span class="c">/* Good CSS */</span>
<span class="nc">.selector</span><span class="o">,</span>
<span class="nc">.selector-secondary</span><span class="o">,</span>
<span class="nc">.selector</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">padding</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">5</span><span class="p">);</span>
  <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="m">#ccc</span><span class="o">,</span> <span class="k">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-declaration-order">
  <div class="col">
    <h3>Declaration order</h3>
    <p>Related property declarations should be grouped together following the order:</p>
    <ol>
      <li>Positioning</li>
      <li>Box model</li>
      <li>Typographic</li>
      <li>Visual</li>
    </ol>
    <p>Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.</p>
    <p>Everything else takes place <em>inside</em> the component or without impacting the previous two sections, and thus they come last.</p>
    <p>For a complete list of properties and their order, please see <a href="https://twitter.github.com/recess">Recess</a>.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.declaration-order</span> <span class="p">{</span>
  <span class="c">/* Positioning */</span>
  <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
  <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">right</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">z-index</span><span class="o">:</span> <span class="m">100</span><span class="p">;</span>

  <span class="c">/* Box-model */</span>
  <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
  <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>
  <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
  <span class="k">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>

  <span class="c">/* Typography */</span>
  <span class="k">font</span><span class="o">:</span> <span class="k">normal</span> <span class="m">13px</span> <span class="s2">&quot;Helvetica Neue&quot;</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span>
  <span class="k">line-height</span><span class="o">:</span> <span class="m">1</span><span class="o">.</span><span class="m">5</span><span class="p">;</span>
  <span class="k">color</span><span class="o">:</span> <span class="m">#333</span><span class="p">;</span>
  <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>

  <span class="c">/* Visual */</span>
  <span class="k">background-color</span><span class="o">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>
  <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#e5e5e5</span><span class="p">;</span>
  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>

  <span class="c">/* Misc */</span>
  <span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-import">
  <div class="col">
    <h3>Don't use <code>@import</code></h3>
    <p>Compared to <code>&lt;link&gt;</code>s, <code>@import</code> is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach:</p>
    <ul>
      <li>Use multiple <code>&lt;link&gt;</code> elements</li>
      <li>Compile your CSS with a preprocessor like Sass or Less into a single file</li>
      <li>Concatenate your CSS files with features provided in Rails, Jekyll, and other environments</li>
    </ul>
    <p>For more information, <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">read this article by Steve Souders</a>.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Use link elements --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;core.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- Avoid @imports --&gt;</span>
<span class="nt">&lt;style&gt;</span>
  <span class="k">@import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&quot;more.css&quot;</span><span class="o">)</span><span class="p">;</span>
<span class="nt">&lt;/style&gt;</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-media-queries">
  <div class="col">
    <h3>Media query placement</h3>
    <p>Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>

<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{</span>
  <span class="nc">.element</span> <span class="p">{</span> <span class="o">...</span><span class="p">}</span>
  <span class="nc">.element-avatar</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
  <span class="nc">.element-selected</span> <span class="p">{</span> <span class="o">...</span> <span class="p">}</span>
<span class="p">}</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-prefixed-properties">
  <div class="col">
    <h3>Prefixed properties</h3>
    <p>When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.</p>
    <p>In Textmate, use <strong>Text &rarr; Edit Each Line in Selection</strong> (&#8963;&#8984;A). In Sublime Text 2, use <strong>Selection &rarr; Add Previous Line</strong> (&#8963;&#8679;&uarr;) and <strong>Selection &rarr;  Add Next Line</strong> (&#8963;&#8679;&darr;).</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Prefixed properties */</span>
<span class="nc">.selector</span> <span class="p">{</span>
  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
          <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">2px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">15</span><span class="p">);</span>
<span class="p">}</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-single-declarations">
  <div class="col">
    <h3>Single declarations</h3>
    <p>In instances where a rule set includes <strong>only one declaration</strong>, consider removing line breaks for readability and faster editing. Any rule set with multiple declarations should be split to separate lines.</p>
    <p>The key factor here is error detection—e.g., a CSS validator stating you have a syntax error on Line 183. With a single declaration, there's no missing it. With multiple declarations, separate lines is a must for your sanity.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Single declarations on one line */</span>
<span class="nc">.span1</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">60px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span2</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">140px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.span3</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">220px</span><span class="p">;</span> <span class="p">}</span>

<span class="c">/* Multiple declarations, one per line */</span>
<span class="nc">.sprite</span> <span class="p">{</span>
  <span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;</span>
  <span class="k">width</span><span class="o">:</span> <span class="m">16px</span><span class="p">;</span>
  <span class="k">height</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span>
  <span class="k">background-image</span><span class="o">:</span> <span class="sx">url(../img/sprite.png)</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.icon</span>           <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-home</span>      <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-20px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.icon-account</span>   <span class="p">{</span> <span class="k">background-position</span><span class="o">:</span> <span class="m">0</span> <span class="m">-40px</span><span class="p">;</span> <span class="p">}</span></code></pre></div>
  </div>
</div>

<div class="section" id="css-shorthand">
  <div class="col">
    <h3>Shorthand notation</h3>
    <p>Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. Common overused shorthand properties include:</p>
    <ul>
      <li><code>padding</code></li>
      <li><code>margin</code></li>
      <li><code>font</code></li>
      <li><code>background</code></li>
      <li><code>border</code></li>
      <li><code>border-radius</code></li>
    </ul>
    <p>Often times we don't need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier
      code with unnecessary overrides and unintended side effects.</p>
    <p>The Mozilla Developer Network has a great article on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand properties</a> for those unfamiliar with notation and behavior.</p>
  </div>
  <div class="col">
    <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Bad example */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span>
  <span class="k">background</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
  <span class="k">background</span><span class="o">:</span> <span class="sx">url(&quot;image.jpg&quot;)</span><span class="p">;</span>
  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span> <span class="m">3px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Good example */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="k">background-color</span><span class="o">:</span> <span clas

CSS

              
                /*
 * Fonts
 */

@font-face {
  font-family: 'fontello';
  src: url('http://codeguide.co/font/fontello.eot');
  src: url('http://codeguide.co/font/fontello.eot#iefix') format('embedded-opentype'), url('http://codeguide.co/font/fontello.woff') format('woff'), url('http://codeguide/font/fontello.ttf') format('truetype'), url('http://codeguide.co/font/fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
}

.icon-github-circled:before {
  content: '\e800';
}
/* 'î €' */

.icon-twitter:before {
  content: '\e801';
}
/* 'î ' */
/*
 * Scaffolding and type
 */

html {
  font-size: 16px;
}

@media (min-width: 48em) {
  html {
    font-size: 20px;
  }
}

body {
  margin: 0;
  font: 1rem/1.5 "PT Sans", sans-serif;
  color: #5a5a5a;
}

a {
  color: #08c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 .5rem;
  font-weight: normal;
  line-height: 1;
  color: #2a2a2a;
  letter-spacing: -.05em;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.25rem
}

p {
  margin: 0 0 1rem;
}

.lead {
  font-size: 1.3rem;
}

blockquote {
  position: relative;
  margin: 0 1rem 1rem;
  font-style: italic;
  color: #7a7a7a;
}

blockquote p {
  margin-bottom: 0;
}

ul li {
  margin-bottom: .25rem;
}
/* Tighten up margin on last items */

p:last-child,
ul:last-child,
blockquote:last-child {
  margin-bottom: 0;
}
/*
 * Code
 */

code,
pre {
  font-family: "PT Mono", Menlo, "Courier New", monospace;
  font-size: 95%;
}

code {
  padding: 2px 4px;
  font-size: 85%;
  color: #d44950;
  background-color: #f7f7f9;
  border-radius: .2rem;
}

pre {
  display: block;
  margin: 0 0 1rem;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
}

pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

.highlight {
  margin: 0;
}

.highlight pre {
  margin-bottom: 0;
}

.highlight + .highlight {
  margin-top: 1rem;
}
/*
 * The Grid
 */

.col {
  padding: 2rem 1rem;
}

.col p {
  max-width: 40rem;
}

.col + .col {
  border-top: 1px solid #dfe1e8;
  background-color: #f7f7f9;
}

@media (min-width: 38em) {
  .col {
    padding: 2rem;
  }
}

@media (min-width: 48em) {
  .section {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .col {
    display: table-cell;
    padding: 3rem;
    vertical-align: top;
  }
  .col + .col {
    border-top: 0;
  }
}
/* Make the ToC a whole section */

.toc .col + .col {
  background-color: #fff;
}
/*
 * Masthead
 */

.masthead {
  padding: 3rem 1rem;
  color: rgba(255, 255, 255, .5);
  text-align: center;
  background-color: #2a3440;
}

.masthead h1 {
  color: #fff;
  margin-bottom: .25rem;
}

.masthead .icon {
  display: inline-block;
  font-size: 3rem;
  margin: 0 .5rem;
}

.masthead-links {
  font-size: 2rem;
}

.masthead-links a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: all .15s linear;
}

.masthead-links a:hover {
  color: #fff;
}

@media (min-width: 38em) {
  .masthead {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/*
 * Sections
 */

.heading {
  padding: 2rem 1rem 1.5rem;
  background-color: #dfe1e8;
}

@media (min-width: 38em) {
  .heading {
    padding: 3rem 3rem 2.5rem;
  }
}

.section {
  border-bottom: 1px solid #dfe1e8;
}
/*
 * Footer
 */

.footer {
  padding: 3rem 1rem;
  font-size: 90%;
  text-align: center;
}

.footer p {
  margin-bottom: .5rem;
}

.quick-links {
  list-style: none;
  margin-left: 0;
}

.quick-links li {
  display: inline;
}
/*
 * Syntax highlighting
 */

.hll {
  background-color: #ffffcc
}
/*{ background: #f0f3f3; }*/

.c {
  color: #999;
}
/* Comment */

.err {
  color: #AA0000;
  background-color: #FFAAAA
}
/* Error */

.k {
  color: #006699;
}
/* Keyword */

.o {
  color: #555555
}
/* Operator */

.cm {
  color: #999;
}
/* Comment.Multiline */
/* Edited to remove italics and make into comment */

.cp {
  color: #009999
}
/* Comment.Preproc */

.c1 {
  color: #999;
}
/* Comment.Single */

.cs {
  color: #999;
}
/* Comment.Special */

.gd {
  background-color: #FFCCCC;
  border: 1px solid #CC0000
}
/* Generic.Deleted */

.ge {
  font-style: italic
}
/* Generic.Emph */

.gr {
  color: #FF0000
}
/* Generic.Error */

.gh {
  color: #003300;
}
/* Generic.Heading */

.gi {
  background-color: #CCFFCC;
  border: 1px solid #00CC00
}
/* Generic.Inserted */

.go {
  color: #AAAAAA
}
/* Generic.Output */

.gp {
  color: #000099;
}
/* Generic.Prompt */

.gs {}
/* Generic.Strong */

.gu {
  color: #003300;
}
/* Generic.Subheading */

.gt {
  color: #99CC66
}
/* Generic.Traceback */

.kc {
  color: #006699;
}
/* Keyword.Constant */

.kd {
  color: #006699;
}
/* Keyword.Declaration */

.kn {
  color: #006699;
}
/* Keyword.Namespace */

.kp {
  color: #006699
}
/* Keyword.Pseudo */

.kr {
  color: #006699;
}
/* Keyword.Reserved */

.kt {
  color: #007788;
}
/* Keyword.Type */

.m {
  color: #FF6600
}
/* Literal.Number */

.s {
  color: #d44950
}
/* Literal.String */

.na {
  color: #4f9fcf
}
/* Name.Attribute */

.nb {
  color: #336666
}
/* Name.Builtin */

.nc {
  color: #00AA88;
}
/* Name.Class */

.no {
  color: #336600
}
/* Name.Constant */

.nd {
  color: #9999FF
}
/* Name.Decorator */

.ni {
  color: #999999;
}
/* Name.Entity */

.ne {
  color: #CC0000;
}
/* Name.Exception */

.nf {
  color: #CC00FF
}
/* Name.Function */

.nl {
  color: #9999FF
}
/* Name.Label */

.nn {
  color: #00CCFF;
}
/* Name.Namespace */

.nt {
  color: #2f6f9f;
}
/* Name.Tag */

.nv {
  color: #003333
}
/* Name.Variable */

.ow {
  color: #000000;
}
/* Operator.Word */

.w {
  color: #bbbbbb
}
/* Text.Whitespace */

.mf {
  color: #FF6600
}
/* Literal.Number.Float */

.mh {
  color: #FF6600
}
/* Literal.Number.Hex */

.mi {
  color: #FF6600
}
/* Literal.Number.Integer */

.mo {
  color: #FF6600
}
/* Literal.Number.Oct */

.sb {
  color: #CC3300
}
/* Literal.String.Backtick */

.sc {
  color: #CC3300
}
/* Literal.String.Char */

.sd {
  color: #CC3300;
  font-style: italic
}
/* Literal.String.Doc */

.s2 {
  color: #CC3300
}
/* Literal.String.Double */

.se {
  color: #CC3300;
}
/* Literal.String.Escape */

.sh {
  color: #CC3300
}
/* Literal.String.Heredoc */

.si {
  color: #AA0000
}
/* Literal.String.Interpol */

.sx {
  color: #CC3300
}
/* Literal.String.Other */

.sr {
  color: #33AAAA
}
/* Literal.String.Regex */

.s1 {
  color: #CC3300
}
/* Literal.String.Single */

.ss {
  color: #FFCC33
}
/* Literal.String.Symbol */

.bp {
  color: #336666
}
/* Name.Builtin.Pseudo */

.vc {
  color: #003333
}
/* Name.Variable.Class */

.vg {
  color: #003333
}
/* Name.Variable.Global */

.vi {
  color: #003333
}
/* Name.Variable.Instance */

.il {
  color: #FF6600
}
/* Literal.Number.Integer.Long */

.css .o,
.css .o + .nt,
.css .nt + .nt {
  color: #999;
}
/* Ads
-------------------------------------------------- */

#fusionads {
  display: block;
  max-width: 18rem;
  padding: 1rem;
  margin: 0 auto;
  overflow: hidden;
  /* clearfix */
  
  font-size: .8rem;
  line-height: 1.3;
  text-align: left;
  background-color: rgba(0, 0, 0, .2);
}

.fusion-text,
.fusion-poweredby {
  display: block;
  color: #fff;
}

.fusion-text:hover,
.fusion-poweredby:hover {
  text-decoration: none;
}

.fusion-img {
  float: left;
  margin-right: 1rem;
}

.fusion-poweredby {
  display: block !important;
  margin-top: .5rem;
}

@media (min-width: 40em) {
  #fusionads {
    max-width: 16rem;
    font-size: .7rem;
  }
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions