O que utilizamos no Locaweb Style

Temos algumas depêndencias e informações importantes para você que vai incluir o Locaweb Style em seu projeto.

Práticas de escrita front-end

Como este é um projeto onde várias pessoas escrevem código front, precisamos manter alguns padrões de escrita. Isso é importante para que o projeto perdure e que novos integrantes entendam facilmente como tudo funciona.

Quando definimos um padrão de escrita de código, queremos que o código seja uniforme. Isso quer dizer que o código precisa parecer que foi escrito por uma única pessoa. Assim, conseguimos manter a manutenção mais simples, garantindo que o projeto seja flexível e escalável de forma consistente. Abaixo separamos algumas das regras que devemos seguir para manter isso tudo funcionando.

Pode ser que tenha alguma regra que você goste ou não esteja familiarizado. Infelizmente, você vai precisa seguir. Todo mundo tem um gosto e não é possível manter o gosto de todos, por isso precisamos escolher apenas um.

Estrutura básica para iniciar um HTML

Senhor programador back-end, utilize esse código para iniciar seu HTML.

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8">
	</head>
	<body>

	</body>
</html>

Espaços em brancos

Escolher entre tabs e espaços sempre é uma dúvida terrível. Mesmo assim, quando se trata de HTML/CSS e Javascript, o padrão sempre foi TABs, embora usemos espaços em linguagens como Ruby, Python e etc.

Descrição de várias classes ou IDs

Como tratamos vários patterns, precisamos sempre reutilizar muito código para manter a uniformidade visual dos elementos e facilitar a manutenção. Por isso, as vezes, precisamos definir o mesmo estilo para vários elementos, assim:

.collapseGroup summary span,
.boxGray.listDetail a,
.serviceName a,
[class^="ico"],
[class*=" ico"],
#menuPrincipal .btMenu a,
#menuPrincipal .parent:hover > a,
#menuPrincipal .parent > a:hover,
#menuPrincipal > ul > li > a:hover {
	color: #4B7CB8;
}

Para não ficar uma linha muito grande com vários elementos definidos, quebramos linha a cada seletor criado. Isso mantém a leitura legível e nos ajuda a identificar erros. Não se preocupe, o Ruby vai minificar todo esse código depois, por isso, ele não vai para a produção dessa forma.

Encoding

Eu sei que eu não preciso dizer, mas quem sabe, não é?
O encoding utilizado é o padrão da web inteira: UTF-8.

<meta charset="utf-8">

SEM BOM! Pelo amor de Deus.

Referências de Entidades

NUNCA use entidades do HTML. Como nós utilizamos UTF-8, coloque o caractere diretamente.

O simbolo do Euro é €. Cifrão $

Cores

Sempre que utilizar uma cor hexadecimal que tenha repetição de valores, use sempre o valor de atalho, assim:

/** Recomendado **/
p {color: #AAA;}

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

RGBA

Sempre que possível, utilize RGBA e mantenha o fallback para browsers antigos. Nós utilizamos Modernizr para que isso seja simples. Um exemplo:

p { color: rgba(0, 0, 0, 0.5); }
.no-rgba p { color: #000; }

Aspas

Tanto no CSS quanto no HTML utilizamos ASPAS DUPLAS. Nunca aspas simples, a não ser no Javascript/JQuery.

input[type="checkout"] { ... }
div:after { content: " "; }

Comentários

Para uma seção:

/*** HEADER
**** Header principal do site
***/

Nunca use comentários na mesma linha da propriedade:

p {color: #FFF;} /** Nunca use comentários assim **/
p {color: #FFF; /** Nunca use comentários assim **/ }

Assim é melhor:

/** Assim é melhor **/
p {
color: #FFF;
background: red;
margin: 0;

/** Assim também é bom **/
padding: 0;
}

LOCAWEB STYLE

Documentação Locaweb Style