Skip to content

Latest commit

 

History

History
266 lines (182 loc) · 5.36 KB

Markup.md

File metadata and controls

266 lines (182 loc) · 5.36 KB

<inglesnarede />

Blog Inglês na Rede 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.

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 (grid stuff, etc)
    4. Other classes
    5. States
    6. Boolean attributes
    7. Schema Tags
    8. ARIA Attributes
<!-- Bad -->
<div role="section" class="columns is-opaque js-button button small-2" itemscope="itemscope" id="btn"></div>

<!-- Good -->
<div id="btn" class="js-button is-opaque small-2 columns" itemscope="itemscope" role="section"></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 4 spaces and never mix spaces with tabs.

EOF

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

Multiple attributes

  • We hardly do it at Blog Inglês na Rede but 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" />

Links

Websites

⬅ back to main    ⬆ back to top