O documento discute boas práticas para escrever código CSS de forma a melhorar a performance e manutenibilidade, incluindo usar CSS resets, escolher uma grade CSS, escrever propriedades em ordem alfabética, usar regras resumidas, padronizar nomenclatura, separar em folhas de estilo e usar unidades como em e rem. Também lista "maus cheiros" como duplicação de código e dificuldade em posicionar elementos. Aborda ainda estruturas como SMACSS, OOCSS e Atomic Design para organizar o CSS em módulos reutiliz

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

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

3. Motivo ?

4. • 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

5. Maus cheiros

6. • 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.

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

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

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

10. 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

12. Animações

13. Como fazer tal coisa ?

14. Obrigado !
=D