Skip to content

Latest commit

 

History

History
307 lines (212 loc) · 6.11 KB

Markup.md

File metadata and controls

307 lines (212 loc) · 6.11 KB

<magnetis />

Magnetis markup code styleguide.

Table of contents

Disclaimer

This document is inspired by Mark Otto's Code Guide, Harry Roberts's coding style and Idiomatic HTML.

⬆ back to top

Doctype

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

⬆ back to top

lang

  • You should specify the language of the documents. We currently only support pt-br.
<html lang="pt-br">
</html>

⬆ back to top

IE compatibility mode

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

Encoding

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

⬆ back to top

CSS and JavaScript includes

  • 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

Naming

  • Always use lowercase tag and attribute names.
<!-- Bad -->
<div id="advertisingModal" class="ModalBase dropShadowFX"></div>

<!-- Good -->
<div id="advertising-modal" class="modal-base drop-shadow-fx"></div>

⬆ back to top

Attribute order

  • The order of attributes should look like:
    1. Element id and/or name
    2. JavaScript class name js-selector
    3. Generic classes (clearfix, grid stuff, etc)
    4. Other classes
    5. States
    6. Data attributes data-*
    7. Other attributes
    8. Boolean attributes
<!-- Bad -->
<div class="clearfix is-opaque js-button button grid-size-2" id="btn" hidden data-fx="fade"></div>

<!-- Good -->
<div id="btn" class="js-button clearfix grid-size-2 button is-opaque" data-fx="fade" hidden></div>

⬆ back to top

Boolean attributes

  • 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

Quotes

  • Always use double quotes " to wrap attribute values.
<!-- Bad -->
<button id=my-button data-fx='fade'>Fade!</button>

<!-- Good -->
<button id="my-button" data-fx="fade">Fade!</button>

⬆ back to top

Self closing tags

  • Always close self closing tags with a slash /, no matter what.
<!-- 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" />

⬆ back to top

Optional closing tags

  • 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

Inline JavaScript

  • Avoid writing JavaScript at all in HTML documents as they're hard to spot.

⬆ back to top

Semantics

  • Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with whenever possible.

⬆ back to top

Whitespace

Tabs

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

EOF

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

Multiple attributes

  • It's cool to break multiple attributes to enforce code readability. Just keep the following format:
<div
  class="modal"
  id="main-modal"
  style="display: none;"	
  hidden
>
</div>

Closing self closing tags

  • When closing self closing tags, always add a single space before />.
<!-- Bad -->
<img src="doge.png"/>

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

Templates

x-template

  • Template elements should have their type value set to x-template.
<!-- Bad -->
<script type="text-template" id="box-template">
  <div class="box"></div>
</script>

<!-- Good -->
<script type="x-template" id="box-template">
  <div class="box"></div>
</script>

id over class

  • Template elements should be identified through id instead of class. Add template suffix as well.
<!-- Bad -->
<script type="x-template" class="js-component">
  <p>Component</p>
</script>

<!-- Good -->
<script type="x-template" id="component-template">
  <p>Component</p>
</script>

⬆ back to top

Links

Websites

⬅ back to main    ⬆ back to top