2.2 CSS

As regra de estilo estabelicidas para CSS são baseadas no guia de estilo para CSS da Google.

Escrita

Utilize sempre letras minúsculas para representar tags, propriedades e valores quando possível.

/* Não recomendado */
H1 {
    FONT-SIZE: 20PX;
}

/* Recomendado */
h1 {
    font-size: 20px;
}

Aspas

Utilize aspas simples quando necessário.

/* Não recomendado */
p {
    font-family: "Comic Sans MS", sans-serif;
}

/* Recomendado */
p {
    font-family: 'Comic Sans MS', sans-serif;
}

Ordem de Declaração

As propriedades devem ser declaradas em ordem alfabética. Contudo, as propriedades de terceiros (-moz-, -webkit-) devem ser ordenadas junto às propriedades que estas alteram.

input {
    border: 1px solid;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: black;
    text-align: center;
    text-indent: 2em;
}

Dica: Com o Sublime Text você pode selecionar as propriedades e pressionar F9 para ordená-las em ordem alfabética.

Nomeclatura para classes e IDs

Utilize nomes que refletem a finalidade do elemento em questão. Nomes que são específicos, representam o real objetivo, são compreensíveis e estão menos propensos a serem mudados. Nomes mais simples também podem ser utilizados.

ID

/*Não Recomendado*/
#yee-1901 {}
#navegacao {}

/*Recomendado*/
#gallery {}
#navigation {}
__________________________________________________________________________________________________________
CLASS

/*Não Recomendado*/
.claro {}
.atr {}

/*Recomendado*/
.video {}
.auxiliar {}

Evite nomeação de classes e IDs com o uso de seletores

A menos que necessário (por exemplo, com classes auxiliares), não use nomes de elementos em conjunto com IDs ou classes.

ID

/*Não Recomendado*/
Ul#example {}

/*Recomendado*/
#example {}
___________________________________________________________________________________________________________
CLASS

/*Não Recomendado*/
.div.error {}

/*Recomendado*/
.error {}

Faça uso da Taquigrafia (escrita rápida)

O CSS oferece uma variedade de taquigrafia, propriedade que permite a escrita do código de maneira mais resumida. É interessante a utilização da mesma sempre que possível, mesmo nos casos em que apenas um valor é definido.

/*Não Recomendado*/
    border-top-style: none;
    font-family: Palatino, Georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;

/*Recomendado*/
    border-top: 0;
    font: 100%/1.6 Palatino, Georgia, serif;
    padding: 0 1em 2em;

Notação Hexadecimal

Use 3 caracteres para notação hexadecimal sempre que possível.

/*Não Recomendado*/
    color: #EEBBCC;

/*Recomendado*/
    color: #EBC;

Utilização de ponto e vírgula

Finalize todas as declarações de propriedades utilizando um ;.

/*Não Recomendado*/
div {
    color: blue;
    font-family: 'Times New Roman', serif
}

/*Recomendado*/
div {
    color: blue;
    font-family: 'Times New Roman', serif;
}

Delimitadores de classes e IDs

Busque ao máximo escrever classes e IDs com nomes simples, mas no caso de palavras compostas utilize hifens - para classes e subtraços _ para IDs.

ID

#new_user {
    /*..*/
}
__________________________________________________________________________________________________________
CLASS

.btn-primary {
    /*..*/
}

Separação entre propriedades e valores

Sempre utilize um espaço simples parar separar uma propriedade dos seus valores

/*Não Recomendado*/
p {
    color:blue;
}

/*Recomendado*/
p {  
    color: blue;
}

Comentários

Para comentários em CSS, utilize a seguinte marcação /* */

/*Isto é um comentário. Comentários não são exibidos no navegador*/

Valide o seu código

Sempre que possível, verifique se o seu arquivo CSS segue os padrões propostos pela W3C.