Skip to content

Latest commit

 

History

History
executable file
·
231 lines (162 loc) · 5.01 KB

README.md

File metadata and controls

executable file
·
231 lines (162 loc) · 5.01 KB
Raw

HTML

Saiku HTML code styleguide.

Table of Contents

  1. Syntax
  2. Doctype
  3. Language attribute
  4. Encoding
  5. IE compatibility mode
  6. CSS and JavaScript includes
  7. Organization
  8. Boolean attributes
  9. JavaScript hooks
  10. Whitespace
  11. Resources

Syntax

  • 1.1 Always use double quotes ".
<!-- Bad -->
<div id=foo></div>

<!-- Bad -->
<div id='foo'></div>

<!-- Good -->
<div id="foo"></div>
  • 1.2 Always close self closing tags with a slash /.
<!-- Bad -->
<p>Lorem ipsum<br>dolor sit</p>

<!-- Good -->
<p>Lorem ipsum<br />dolor sit</p>

<!-- Bad -->
<img src="path/to/image.png">

<!-- Good -->
<img src="path/to/image.png" />
  • 1.3 Always close optional closing tags.
<!-- Bad -->
<ul>
  <li>Once
  <li>Upon
  <li>A Time
</ul>

<!-- Good -->
<ul>
  <li>Once</li>
  <li>Upon</li>
  <li>A Time</li>
</ul>

⬆ back to top

Doctype

  • 2.1 Follow HTML5 doctype to enforce standards and a more consistent rendering.
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

⬆ back to top

Language attribute

  • 3.1 Always specify a language for documents.
<html lang="en-us">
  <!-- ... -->
</html>

⬆ back to top

Encoding

  • 4.1 Use utf-8 as de default encoding of HTML documents.
<head>
  <meta charset="utf-8">
</head>

⬆ back to top

IE compatibility mode

  • 5.1 Internet Explorer supports the use of a document compatibility <meta> tag to specify what version of IE the page should be rendered. You should force edge mode.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

⬆ back to top

CSS and JavaScript includes

  • 6.1 There's no need to specify the type attribute of include tags.
<!-- External CSS -->
<link rel="stylesheet" href="path/to/external.css">

<!-- Inline CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="path/to/script.js"></script>

⬆ back to top

Organization

  • 7.1 The order of rules declaration should look like the following.
    1. Generic classes (utils, typography, grid and so on)
    2. Specific classes
    3. id and name
    4. States
    5. Data attributes
    6. Other element attributes
    7. Boolean attributes
<input type="text" class="u-pull-left input--big is-disabled" id="user-input" name="user-input" data-component="input-text" data-parameters="{value: 42}" disabled />

⬆ back to top

Boolean attributes

  • 8.1 Do not add values to boolean attributes.
<!-- Bad -->
<input type="checkbox" value="Bar" checked="checked">Foo</input>

<!-- Good -->
<input type="checkbox" value="Bar" checked>Foo</input>

<!-- Bad -->
<input type="submit" disabled="disabled">Send email</input>

<!-- Good -->
<input type="submit" disabled>Send email</input>

⬆ back to top

JavaScript hooks

  • 9.1 JavaScript hooks should be declared as component data attribute.
<button class="c-button c-button--big" data-component="buy-it-button">Buy it</button>
  • 9.2 Always use parameters data attribute for component parameters following the literal object syntax.
<div class="c-carousel" data-component="carousel" data-parameters="{direction: 'left-to-right', speed: 2.5, easing: 'easeOutExpo'}">
  <!-- ... -->
</div>

⬆ back to top

Whitespace

  • 10.1 Use soft tabs set to 4 spaces and never mix tabs with spaces.

  • 10.2 Always add an empty line at the end of your file.

  • 10.3 Break multiple attributes in new lines when needed.

<div
  class="modal"
  id="main-modal"
  style="display: none;"
  hidden
>
</div>
  • 10.4 When closing self closing tags, always add a single space before />.
<!-- Bad -->
<img src="doge.png"/>

<!-- Good -->
<img src="doge.png" />

⬆ back to top

Resources

Inspiration

⬅ back to main    ⬆ back to top