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

William Brunowbruno.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ódulosFaç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