Repensando seu CSS - Boas práticas e performance
5 gostaram988 visualizações
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
![• 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](https://image.slidesharecdn.com/css-boas-praticas-performance-140515212811-phpapp01/85/Repensando-seu-CSS-Boas-praticas-e-performance-4-320.jpg)
Repensando seu CSS - Boas práticas e performance
- 1. Repensando seu CSS Performance e boas práticas (do código)
- 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