Repensando seu CSS
Performance e boas práticas (do código)

William Bruno
wbruno.com.br
github.com/wbruno
@tiu_uiLL

Motivo ?

• Use algum CSS reset;
• Escolha ou crie a sua própria GRID CSS;
• Escreva suas propriedades em ordem alfabética ou por tipo de propriedade;
• Use regras resumidas;
• Indentar elementos encaixados (?)
• Um único padrão de nomenclatura [camelCase, dash-case, underscore, ou…];
• Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas;
• O código de um time deve parecer ter sido escrito pela mesma pessoa;
• Escolha bons nomes;
• Comente para organizar;
• Separe em mais de uma folha de estilos;
• Use em/rem.
Dicas rápidas

Maus cheiros

• Quando estiver duplicando código;
• Quando notar muitas vírgulas no css;
• Quando não estiver aproveitando a cascata;
• Quando você estiver utilizando muitas tags como seletores;
• Quando posicionar algo estiver muito difícil;
• Quando você observar valores gigantes no css;
• Quando houver código que você não sabe onde é ou se ainda é usado;
• Quando você não souber como resolver o side effect do float;
• Quando ficar confuso entre margin e padding;
• Quando você precisar sobrescrever você mesmo.

SMACSS
<div class=“box”>
<h2 class=“box-title”>Lorem ispum</h2>
<p class=“box-text”>Dolor sit amet, …</p>
</div>

OOCSS
• A idéia principal é facilitar a manutenção;
• Bom senso, não faça .btn-red;
• .btn .btn-hire

Atomic Design
• Organização e separação;
• Divida um grande problema em diversos menores.

Módulos
Faça componentes para
serem reutilizados,
em outros contextos,
sem afetar e sem serem afetados
pelos estilos de outros módulos.
Necessário vir desde
o Wire e Layout esse pensamento

Animações

Como fazer tal coisa ?

Obrigado !
=D