Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

Meu Estilo de Código

"Toda linha de código deve parecer que foi escrita por uma única pessoa, não importa a quantidade de contribuidores." - Provérbio Chinês

O documento a seguir descreve as regras de escrita nas linguagens de desenvolvimento que utilizo: HTML, CSS e Javascript.

A ideia desse repositório não é ser um guia de código completo. Mas sim ter um local para que eu e outros desenvolvedores que participam dos meus projetos conseguirem se informar dos padrões de códigos usados.

Como este é um novo documento, algumas regras podem não ter sido aplicadas em projetos antigos.

Este é um documento vivo e mudanças podem acontecer a qualquer momento.

Sumário

[Commits] (#commits)
[HTML] (#html)
[CSS] (#css)
[Javascript] (#js)
Referências
Traduções
Licença

1. Commits

Para facilitar a contribuição de qualquer pessoa nos projetos, todas as mensagens de commit, pull requests ou discussões devem ser em Inglês.

Antes de commitar ajustes no projeto, verifique se existe uma issue aberta e faça referência a ela usando '#' na sua mensagem de commit.

// Bom
git commit -m "Add placeholder in input #10"

// Ruim
git commit -m "Add placeholder in input"

2. HTML

A principal influencia das regras de HTML é o Code Guide by @mdo.

HTML Sumário

[HTML Sintaxe] (#html-syntax)
[HTML Comentários] (#html-comments)
[HTML Encoding de Caracteres] (#html-encoding)
[HTML Ordem dos Atributos] (#html-attribute-order)
[HTML Performance] (#html-performance)
[HTML Código Base] (#html-base)

2.1. HTML Sintaxe

Use soft-tabs com dois espaços. Você pode configurar o seu editor dessa forma.

<!-- Bom -->
<nav class="nav">
  <ul class="nav-menu">
    <li class="nav-item">
      <a class="nav-link">

<!-- Ruim -->
<nav class="nav">
      <ul class="nav-menu">
            <li class="nav-item">
                  <a class="nav-link">

Sempre use aspas duplas.

<!-- Bom -->
<div class="main">

<!-- Ruim -->
<div class='main'>

Não inclua / em elementos viúvos.

<!-- Bom -->
<hr>

<!-- Ruim -->
<hr />

Separe os blocos usando uma linha em branco e agrupe os elementos internos do bloco.

<!-- Bom -->
<ul class="nav-tabs">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

<div class="tab-content">
  ...
</div>

<!-- Ruim -->
<ul class="nav-tabs">

  <li>...</li>

  <li>...</li>

  <li>...</li>

  <li>...</li>

</ul>
<div class="tab-content">
  ...
</div>

2.2. HTML Comentários

Siga esta regra para adicionar comentários no HTML

<!-- Este é um bom exemplo -->
<!-- /Fechando um bom exemplo -->

2.3. HTML Encoding de Caracteres

Sempre use UTF-8 para encoding de caracteres.

<head>
  <meta charset="UTF-8">
</head>

2.4. HTML Ordem dos Atributos

Os atributos do HTML devem estar na seguinte ordem para facilitar a leitura.

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

<a class="..." id="..." data-modal="toggle" href="#">

<input class="form-control" type="text">

<img class="img-rounded" src="..." alt="...">

2.5. HTML Performance

Nos includes dos arquivos CSS e Javascript não é necessário especificar o tipo de arquivo como text/css e `text/javascript.

<!-- Bom -->
<link rel="stylesheet" href="assets/css/style.css" />
<script src="scripts.min.js"></script>

<!-- Ruim -->
<script src="scripts.min.js"></script>
</head>
<body>

Para uma melhor performance, todos os arquivos javascripts devem estar antes de fechar o <body>, no fim do documento.

<!-- Bom -->
<script src="scripts.min.js"></script>
</body>

<!-- Ruim -->
<script src="scripts.min.js"></script>
</head>
<body>

Quando o projeto usar apenas HTML, sempre minifique o código. Automatizadores de tarefas como o Grunt tornam isso muito mais fácil.

<!-- Bom -->
<html><head>...</head><body><div class="container">...</div></body></html>

<!-- Ruim -->
<html>
  <head>
    ...
  </head>
  <body>
    <div class="container">
      ...
    </div>
  </body>
</html>

2.6. HTML Código Base

O código a seguir é uma base em HTML para iniciar rápidamente os projetos.

<!DOCTYPE html>
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width">

<link rel="shortcut icon" href="assets/img/ico/favicon.ico" />
<link rel="logo" type="image/svg" href="../assets/img/logo/logo.svg" />
<link rel="stylesheet" href="assets/css/style.css" />

<title></title>

</head>
<body>

<!-- Scripts -->
<script src="assets/js/scripts.min.js"></script>

</body>
</html>

Para fornecer suporte para versões antigas do Internet Explorer...

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
...

3. CSS

A principal influencia para as regras de CSS são o Code Guide by @mdo e o idiomatic CSS.

CSS Sumário

[CSS Sintaxe] (#css-syntax)
[CSS Ordem de Declaração] (#css-order)
[CSS Nome das Classes] (#css-class-name)
[CSS Performance] (#css-performance)
[Mobile First e Media Queries] (#mobile-first-and-media-queries)
[Pre-Processores] (#css-pre-processors)
[CSS Comentários] (#css-comments)

3.1. CSS Sintaxe

Use soft-tabs com dois espaços. Você pode configurar o seu editor dessa forma.

/* Bom */
.nav-item {
  display: inline-block;
  margin: 0 5px;
}

/* Ruim */
.nav-item {
    display: inline-block;
    margin: 0 5px;
}

Sempre use aspas duplas.

/* Bom */
[type="text"]
[class^="..."]

.nav-item:after {
  content: "";
}

/* Ruim */
[type='text']
[class^='...']

.nav-item:after {
  content: '';
}

Inclua um espaço antes de abrir o } da regra.

/* Bom */
.header {
  ...
}

/* Ruim */
.header{
  ...
}

Inclua um espaço depois do : da declaração.

/* Bom */
.header {
  margin-bottom: 20px;
}

/* Ruim */
.header{
  margin-bottom:20px;
}

Inclua um ; no fim da declaração.

/* Bom */
.header {
  margin-bottom: 20px;
}

/* Ruim */
.header{
  margin-bottom:20px
}

Mantenha uma declaração por linha.

/* Bom */
.selector-1,
.selector-2,
.selector-3 {
  ...
}

/* Ruim */
.selector-1, .selector-2, .selector-3 {
  ...
}

Declarações únicas devem ficar em uma linha.

/* Bom */
.selector-1 { width: 50%; }

/* Ruim */
.selector-1 {
  width: 50%;
}

Separe as regras por uma linha em branco.

/* Bom */
.selector-1 {
  ...
}

.selector-2 {
  ...
}

/* Ruim */
.selector-1 {
  ...
}
.selector-2 {
  ...
}

Use caixa-baixa, valores hexadecimais reduzidos e não especifique unidades quando o valor é zero.

/* Bom */
.selector-1 {
  color: #aaa;
  margin: 0;
}

/* Ruim */
.selector-1 {
  color: #AAAAAA;
  margin: 0px;
}

3.2. CSS Ordem de Declaração

As declarações devem ser adicionadas em ordem alfabética.

/* Bom */
.selector-1 {
  background: #fff;
  border: #333 solid 1px;
  color: #333;
  display: block;
  height: 200px;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

/* Ruim */
.selector-1 {
  padding: 5px;
  height: 200px;
  background: #fff;
  margin: 5px;
  width: 200px;
  color: #333;
  border: #333 solid 1px;
  display: block;
}

3.3. CSS Nome das Classes

Mantenha as classes em caixa-baixa e use hífen para separar os nomes.

/* Bom */
.nav-item { ... }

/* Ruim */
.NavItem { ... }
.nav_item { ... }

Hífens servem como uma transição natural entre classes relacionadas. O primeiro nome deve ser baseado no parente imediato da classe que deseja criar.

/* Bom */
.navbar { ... }
.nav { ... }
.nav-item { ... }
.nav-link { ... }

/* Ruim */
.item-nav { ... }
.link-nav { ... }

Evite usar nomes muito curtos e sempre use nomes relacionados com a função da classe.

/* Bom */
.btn { ... }
.page-header { ... }
.progress-bar { ... }

/* Ruim */
.s { ... }
.ph { ... }
.block { ... }

3.4. CSS Performance

Nunca use IDs.

/* Bom */
.header { ... }
.section { ... }

/* Ruim */
#header { ... }
#section { ... }

Não use seletores padrões para regras genéricas. Sempre use classes.

/* Bom */
.form-control { ... }
.header { ... }
.section { ... }

/* Ruim */
input[type="text"] { ... }
header
section

Evite elementos aninhados. A preferência é sempre para o uso de classes.

/* Bom */
.navbar { ... }
.nav { ... }
.nav-item { ... }
.nav-link { ... }

/* Ruim */
.navbar ul { ... }
.navbar ul li { ... }
.navbar ul li a { ... }

Aninhe somente quando precisar alterar o comportamento de uma classe por interferência de outra. Mantenha um limite de três elementos aninhados.

/* Bom */
.modal-footer .btn { ... }
.progress.active .progress-bar { ... }

/* Ruim */
.modal-btn { ... }
.progress.active .progress-bar .progress-item span { ... }

Sempre minifique o código CSS. Automatizadores de tarefas como o Grunt tornam isso muito mais fácil.

<!-- Bom -->
.navbar { ... }.nav { ... }.nav-item { ... }.nav-link { ... }

<!-- Ruim -->
.nav-item {
  ...
}
.nav-link {
  ...
}

3.5 Mobile First and Media Queries

Comece o desenvolvimento usando regras genéricas e adiciona media queries começando com mobile. Compartilho um artigo com mais informações, CSS Modular com Mobile First.

/* Bom */
.navbar {
  margin-bottom: 20px;
}

@media (min-width: 480px) {
  .navbar {
    padding: 10px;
  }
}

@media (min-width: 768px) {
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (min-width: 992px) {
  .navbar {
    position: fixed;
  }
}

/* Ruim */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
  .navbar {
    position: static;
    padding: 10px;
  }
}

Mantenha os media queries o mais próximo possível da regra que deseja alterar. Não coloque em documentos separados ou no fim do stylesheet.

.navbar { ... }
.nav { ... }
.nav-item { ... }

@media (min-width: 480px) {
  .navbar { ... }
  .nav { ... }
  .nav-item { ... }
}

3.6. Pré-Processores

Eu uso pré-processadores em todos os projetos. Atualmente estou usando LESS.

Cuidado com a facilidade de aninhar elementos com os pré-processadores. Continue evitando aninhamentos.

/* Bom */
.nav-item { ... }

/* Ruim */
.navbar {
  .nav {
    .nav-item {
      ...
    }
  }
}

Forneça nomes semânticos para as variaveis.

/* Bom */
@brand-primary: #049cdb;

/* Ruim */
@color-blue: #049cdb;

3.7. CSS Comentários

Todos os comentários devem ser feitos usando a sintaxe do pré-processador em uso.

//
// Seção
// --------------------------------------------------

// Sub-seção
// --------------------------------------------------

//
// Bloco de comentário
//
//

// Comentário simples

4. Javascript

As principais influencias para as regras de escrita em javascript são o idiomatic.js e o Zeno Rocha Coding Style.

Javascript Sumário

[Javascript Sintaxe] (#js-syntax)
[Javascript Variáveis] (#js-variables)
[Javascript Performance] (#js-performance)
[Javascript Comentários] (#js-comments)

4.1. Javascript Sintaxe

Use soft-tabs com dois espaços. Você pode configurar o seu editor dessa forma.

// Bom
while (condition) {
  statements
}

// Ruim
while (condition) {
    statements
}

Sempre use ;.

// Bom
var me = $(this);
test();

// Ruim
var me = $(this)
test()

Sempre use aspas simples.

// Bom
var string = '<p class="foo">Lorem Ipsum</p>';
var noteClick = me.attr('data-note');

// Ruim
var string = "<p class="foo">Lorem Ipsum</p>";
var noteClick = me.attr("data-note");

Mantenha o else na mesma linha que fechar o if.

// Bom
if ( true ) {
  ...
} else {
  ...
}

// Ruim
if ( true ) {
  ...
}
else {
  ...
}

Adicione espaços entre os operadores.

// Bom
for (i = 0; i < 10; i++) {
  ...
}

// Ruim
for (i=0;i<10;i++) {
  ...
}

Nunca adicione espaço entre a chave de função e o nome da função.

// Bom
foo(function() {
  ...
});

// Ruim
foo ( function () {
  ...
});

Adicione espaços fora dos (), mas nunca dentro deles.

// Bom
if (condition) {
  statement
}

// Ruim
if( condition ){
  statement
}

Para condicionais, sempre use {}.

// Bom
if (condition) {
  statement
} else if (condition) {
  statement
} else {
  statement
}

// Ruim
if (condition) statement;
else if (condition) statement;
else statement;

Para checar igualdade, use === ao invés de usar ==.

// Bom
if (foo === 'foo') {
  statement
}

// Ruim
if (foo == 'foo') {
  statement
}

4.2. Javascript Variáveis

Todas as variáveis devem ser declaradas antes de usar.

// Bom
var me = $(this);
var noteClick = me.attr('data-note');
notes[noteClick].play();

// Ruim
notes[noteClick].play();
var me = $(this);
var noteClick = me.attr('data-note');

Sempre use var para declarar uma variável.

// Bom
var me = $(this);

// Ruim
me = $(this);

4.3. Javascript Performance

Use o JSHint para detectar erros e potenciais problemas.

Sempre concatene e minifique o código javascript. Automatizadores de tarefas como o Grunt tornam isso muito mais fácil.

4.4. Javascript Comentários

Uma única linha acima do código que é comentado.

// Bom
// Bom exemplo de comentário
var me = $(this);

// Ruim
var me = $(this); // Exemplo ruim de comentário

5. Referências

6. Traduções

English

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

pt-BR

pt-BR

README.md

Meu Estilo de Código

Sumário

1. Commits

2. HTML

HTML Sumário

2.1. HTML Sintaxe

2.2. HTML Comentários

2.3. HTML Encoding de Caracteres

2.4. HTML Ordem dos Atributos

2.5. HTML Performance

2.6. HTML Código Base

3. CSS

CSS Sumário

3.1. CSS Sintaxe

3.2. CSS Ordem de Declaração

3.3. CSS Nome das Classes

3.4. CSS Performance

3.5 Mobile First and Media Queries

3.6. Pré-Processores

3.7. CSS Comentários

4. Javascript

Javascript Sumário

4.1. Javascript Sintaxe

4.2. Javascript Variáveis

4.3. Javascript Performance

4.4. Javascript Comentários

5. Referências

6. Traduções

7. Licença

Files

pt-BR

Directory actions

More options

Directory actions

More options

Latest commit

History

pt-BR

Folders and files

parent directory

README.md

Meu Estilo de Código

Sumário

1. Commits

2. HTML

HTML Sumário

2.1. HTML Sintaxe

2.2. HTML Comentários

2.3. HTML Encoding de Caracteres

2.4. HTML Ordem dos Atributos

2.5. HTML Performance

2.6. HTML Código Base

3. CSS

CSS Sumário

3.1. CSS Sintaxe

3.2. CSS Ordem de Declaração

3.3. CSS Nome das Classes

3.4. CSS Performance

3.5 Mobile First and Media Queries

3.6. Pré-Processores

3.7. CSS Comentários

4. Javascript

Javascript Sumário

4.1. Javascript Sintaxe

4.2. Javascript Variáveis

4.3. Javascript Performance

4.4. Javascript Comentários

5. Referências

6. Traduções

7. Licença