Code Style Guide

1. Sintaxe
2. Declaração
3. Comentários

Sintaxe

Use soft-tabs com dois espaços:

/* bom */
.btn {
color:#fff;
}
/* ruim */
.btn{
color:#fff;
}

Use sempre aspas duplas:

/* bom */
.btn {
background-image:url("textura.jpg");
font-family:"Helvetica Neue", sans-serif;
}
/* ruim */
.btn {
background-image:url('textura.jpg');
font-family:'Helvetica Neue', sans-serif;
}

Inclua um espaço antes de abrir as chaves da regra:

/* bom */
.btn {
color:#fff;
}
/* ruim */
.btn{
color:#fff;
}

Fecha as chaves em uma nova linha:

/* bom */
.btn {
color:#fff;
}
/* ruim */
.btn {
color:#fff;}

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

/* bom */
.btn {
color:#fff;
}
/* ruim */
.btn {
color:#fff;
}

Sempre use um ; no fim da declaração:

/* bom */
.btn {
color:#fff;
}
/* ruim */
.btn {
color:#fff
}

Mantenha sempre uma declaração por linha:

/* bom */
.nav,
.footer,
.btn {
color:#fff;
}
/* ruim */
.nav, .footer, .btn {
color:#fff;
}

Separe as regras por uma linha em branco:

/* bom */
.btn {
color:#fff;
}
.nav-item {
color:#fff;
}
/* ruim */
.btn {
color:#fff;
}
.nav-item {
color:#fff;
}

Sempre use caixa baixa:

/* bom */
.nav-item {
color:#fff;
}
/* ruim */
.Nav-item {
color:#fff;
}

Use hífens para separar os nomes:

/* bom */
.nav-item {
color:#fff;
}
/* ruim */
.nav_item {
color:#fff;
}

Sempre que usar valores hexadecimais usem sempre reduzidos:

/* bom */
.nav-item {
color:#fff;
}
/* ruim */
.nav-item {
color:#ffffff;
}

Não especifique unidades quando o valor for igual a zero:

/* bom */
.nav-item {
padding:0;
}
/* ruim */
.nav-item {
padding:0px;
}

Não use valores iniciados com zero:

/* bom */
.nav-item {
transition: color .3s;
}
/* ruim */
.nav-item {
transition: color 0.3s;
}

Declarações

Todas as declarações devem estar em ordem alfabética.

/* bom */
.btn {
background:#000;
color:#fff;
display: inline-block;
margin:0;
padding:10px;
}
/* ruim */
.btn {
color:#fff;
background:#000;
margin:0;
padding:10px;
display: inline-block;
}

Comentários

/* Bloco de comentário de seção======================================== *//* Bloco de comentário de sub-seção==================== *//* Comentário básico */