/code-style-guide

Code Style Guide Work with CSS

Code Style Guide

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

Sintaxe

Use soft-tabes 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 braco:

/* 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 valor 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 */