Skip to content

Markup.md

Latest commit

 

History

History
294 lines (200 loc) · 6.04 KB

Markup.md

File metadata and controls

294 lines (200 loc) · 6.04 KB

<focusnetworks />

Focusnetworks markup code styleguide.

Menu

Disclaimer

Esse documento foi inspirado nos guides de Mark Otto's Code Guide, Harry Roberts's coding style e Idiomatic HTML.

⬆ voltar ao topo

Doctype

  • Use HTML5 doctype para assegurar padrões e uma maior consistência em diferentes browsers.
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

⬆ voltar ao topo

lang

  • Você deve especificar o idioma dos documentos. Em nossos projetos utilizamos com maior frequência o pt-br.
<html lang="pt-br">
</html>

⬆ voltar ao topo

Compatibilidade IE

Utilizamos a tag <meta> de compatibilidade para especificar ao IE qual versão do browser deve ser renderizada. Por padrão forçamos o Edge Mode.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

⬆ voltar ao topo

Encoding

  • Usamos o UTF-8 como encoding padrão dos documentos HTML.
<head>
  <meta charset="utf-8">
</head>

⬆ voltar ao topo

CSS e JavaScript includes

  • Não há a necessidade de informar o atributo type.
<!-- CSS -->
<link rel="stylesheet" href="path/to/external.css">

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

⬆ voltar ao topo

Nomenclatura

  • Sempre utilizamos lowercase nos nomes de tags e atributos.
<!-- Bad -->
<div id="adversitingModal" class="ModalBase dropShadowFX"></div>

<!-- Good -->
<div id="adversiting-modal" class="modal-base drop-shadow-FX"></div>

⬆ voltar ao topo

Ordem dos atributos

  • A ordem dos atributos deve seguir essa regra:
    1. Elemento id e/ou name
    2. Nome da classe JavaScript js-selector
    3. Classes genéricas (clearfix, grid stuff, etc)
    4. Outras classes
    5. Estados
    6. Data attributes data-*
    7. Outros atributos
    8. Atributos booleanos
<!-- 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>

⬆ voltar ao topo

Atributos booleanos

  • Não adicione valores aos atributos booleanos.
<!-- 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>

⬆ voltar ao topo

Aspas

  • Sempre use aspas duplas " para envolver os atributos.
<!-- Bad -->
<button id=my-button data-fx='fade'>Fade!</button>

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

⬆ voltar ao topo

Tags de auto fechamento

  • Sempre feche as tags de auto fechamento /, não importa quais sejam.
<!-- 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" />

⬆ voltar ao topo

Tags de fechamento opcional

  • Sempre feche as tags de fechamento opcional
<!-- Bad -->
<ul>
  <li>Once
  <li>Upon
  <li>A Time
</ul>

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

⬆ voltar ao topo

Inline JavaScript

  • Evite escrever Javascript em documentos HTML, eles são difíceis de detectar.

⬆ voltar ao topo

Inline CSS

  • Evite escrever CSS em documentos HTML, eles são difíceis de detectar.

⬆ voltar ao topo

Semântica

  • Esforce-se para manter os padrões de HTML e semântica, mas não às custas da praticidade. Use a menor quantidade de marcação sempre que possível.

⬆ voltar ao topo

Espaços em branco

Tabs

  • Use soft tabs definido para 2 espaços e nunca misture espaços com tabs.

EOF

  • Sempre adicione uma linha em branco ao final do seu documento.

Fechando tags de auto fechamento

  • Quando fechar tags de auto fechamento, sempre adicione um espaço antes de />.
<!-- Bad -->
<img src="doge.png"/>

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

Templates

x-template

  • Elementos template devem ter o valor de seu type definido como 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 ao invés de class

  • Elementos template devem ser identificados através de id ao invés de class. Adicionar o sufixo template também.
<!-- Bad -->
<script type="x-template" class="js-component">
  <p>Component</p>
</script>

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

⬆ voltar ao topo

Links

Websites

⬅ voltar à página inicial    ⬆ voltar ao topo