Padrões de codificação

• Todos os arquivos devem ser escritos com codificação utf-8.
• Nunca utilize TAB (U+0009). Utilize sempre espaços.
• Nunca deixe espaços após o final das linhas.
• Deixe sempre uma linha antes do final do arquivo.
• Para facilitar a leitura, as linhas devem conter cerca de 80 caracteres, no máximo 120 caracteres.
• Nunca siga os exemplos em w3schools.com.
• Leitura interessante w3fools.com.
• Váááááárias ótimas referências (em português).

TOC

• HTML
• Javascript
• CSS/LESS
• PHP
• Sem documentação

HTML

Formatação geral

Nunca utilize style nas tags htm.l

Parágrafos devem ser sempre colocados em <p> tag. Nunca use <br>.

Listas devem estar preferencialmente em <ul>, <ol> ou <dl>. Nunca use um conjunto de <div> ou <p>.

Apesar das aspas serem opcionais, sempre coloque os atributos entre aspas para facilitar a leitura.

// certo
<form role="form" action="form-action">
</form>

// errado
<form role=form action=form-action>
</form>

Evite escrever fechamento comentários tag, como <!-- /.element -->. Isso só aumenta o tempo de carregamento da página e dificulta comentar blocos de páginas e/ou templates em desenvolvimento. Além disso, a maioria dos editores têm guias de recuo e abrir/fechar a tag em questão. Utilize comentários <!-- --> somente quando necessário.

Não use a barra/slash em elementos de fecho automático.

// certo
<input type="text" name="model-column">
<img src="holder.js/50x50" alt="Imagem de 50x50">

// errado
<input type="text" name="model-column" />
<img src="holder.js/50x50" alt="Imagem de 50x50"/>

Atributos booleanos

Em vários atributos, como disabled ou required, o valor é opcional, então não atribua valores.

// certo
<input type="text" disabled>

<select>
  <option value="1" selected>1</option>
</select>

// errado
<input type="checkbox" value="1" checked="checked">

Markup limpo

Sempre que possível, evite elementos pai supérfluos ao escrever HTML. Muitas vezes isso requer iteração e refatoração, mas produz menos HTML.

// hmmmm...
<span class="avatar">
  <img src="..." class="img">
</span>

// Melhor assim
<img class="avatar" src="...">

Formulários

Sempre inclua os atributos name, action, novalidate e role="form" em formulários.

// certo
<form name="frm-search" action="search" role="form" novalidate>

// errado
<form action="search" method="get">

GET é o método padrão na submissão de formulários, nunca use method="get".

Botões devem sempre conter o atributo type.

Todos os campos de formulários devem conter a tag <label>. Principalmente <input type="radio"> e <input type="checkbox">.

Tabelas

Sempre que apropriado, utilize <thead>, <tfoot> e <tbody>. Se atente que <tfoot> deve vir antes de <tbody>.

// Exemplo de um markup bem definido
<table>
  <thead>
    <tr>
      <th>campo 1</th>
      <th>campo 2</th>
      <th>campo 3</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>descrição campo 1</th>
      <th>descrição campo 2</th>
      <th>descrição campo 3</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>valor 1</td>
      <td>valor 2</td>
      <td>valor 3</td>
    </tr>
  </tbody>
</table>

HTML + PHP

Não utilize ; no final das instruções PHP:

// certo
<h1><?php echo $this->column ?><h1>

<div>
  <?php if (true): ?>
    <span>true!</span>
  <?php endif ?>
</div>

// errado
<h1><?php echo $this->column; ?></h1>

<?php endif; ?>
<?php endfor; ?>

Sempre utilize <?php, nunca <?:

// certo
<?php echo $this->column ?>

// errado
<?= $this->column ?>

Use uma instrução por linha, e uma linha por instrução:

// certo
<?php foreach ($this as $that):?>
  <?php if ($that->isTrue):?>
    <span>true</span>

  <?php else: ?>
    <span>false</span>
  <?php endif?>
<?php endforeach?>

// errado
<?php
foreach ($this as $that):
?>

// muito errado
<?php
  if ($that->isTrue)
    echo 'true';
  else:
    echo 'false'
  endif;
?>

Indente o código, como se fosse HTML puro:

<table>
  <tbody>
    <?php foreach ($this->items as $item): ?>
      <tr>
        <td>
          <a href="#">$item->column</a>
        </td>
        <td>$item->column</td>
      </tr>
    <?php endforeach?>
  </tbody>
</table>

Validação

Antes de publicar seus arquivos, verifique se o HTML é válido e limpe seu código fonte com HTML tidy.

Verifique se o site é renderizado corretamente em todos os devices.

Referências

• html5doctor
• Especificação HTML5

Javascript

Siga isso: https://github.com/felixge/node-style-guide (Esse cara, Felix Geisendörfer, é um dos criadores do node.js, ele não deve estar errado).

Validação

Antes de publicar seus arquivos, utilize o JSLint com a seguinte configuração: /*jslint indent:2, vars:true */

/*jslint indent:2, vars:true */
// Utilize unparam:true e browser:true, somente quando necessário.
(function () {
  'use strict';
}());

Se você estiver usando Yuga o lint será automático com a configuração certa.

jQuery

Performance: Nunca utilize jQuery.hide(). Nunca. (jQuery issue#88).

Referências

• Especificação ECMAScript 5.1 (em português).
• Formatação

CSS/LESS

Use dois espaços na indentação do código. Espaços são a única maneira de garantir que o código fique sempre igual no ambiente de qualquer pessoa.

Coloque um espaço depois de : em declarações de propriedade.

Coloque um espaço antes de { nas declarações de regras.

Quem utilizar frameworks, Twitter Bootstrap por exemplo, use os componentes conforme a documentação.

Validação

Antes de publicar seus arquivos, verifique se o CSS é válido.

PHP

Utilizar o padrão estabelecido pelo framework utilizado:

• Symfony
• Zend Framework

Caso o framework não possua padronização, ou você não esteja usando nenhum no seu projeto, siga o padrão Zend.

Validação

No seu ambiente de desenvolvimento, utilize a configuração abaixo:

error_reporting = E_ALL & E_STRICT & E_DEPRECATED
display_errors = On

Referências

• PHP: The Right Way
• Manual do PHP (em português)

Ok, e o que não foi documentado?

Siga seu ❤️

Dúvidas, críticas e sugestões?

Sente, respire e discuta com sua equipe 👍