Future Proof CSS

Transcript

1. Future Proof CSS Criando folhas de estilo resistentes ao tempo
2. // Vitor Mendrone // Senior Front-end Engineer
4. CSS já me f*%# pra car&*#$! Provável ferramenta utilizada na criação do CSS
5. O sofrimento é um grande professor. E me ensinou algumas lições.
6. 1º - Aprenda com os designers de UX Planejamento é tudo.
7. Seu trabalho precisa gerar valor mesmo quando você não está codando.
8. Invista tempo analisando página a página do layout. Não escreva uma linha de código sem antes planejar minuciosamente como implementá-lo.
9. 2º - Seu CSS deve ser sempre 'HTML Agnostic' Evite ao máximo utilizar seletores de tags (type selectors) em suas folhas de estilo.
10. Place your code snippet here Remember: that a presentation, be careful with big chunks of code
11. Place your code snippet here Remember: that a presentation, be careful with big chunks of code
12. 3º - Não tenha medo de inserir novos elementos HTML Não é errado incluir novos elementos desde que sirvam para criar componentes mais robustos
13. Place your code snippet here Remember: that a presentation, be careful with big chunks of code
14. 4º - Utilize sempre o mínimo seletor viável. Se possível, substitua seletores aninhados por novas classes
15. 5º - Evite adicionar mais CSS para resolver bugs Se necessário dê um passo atrás e tenha certeza de que o bug só pode ser resolvido com mais CSS
16. Use e abuse das devtools do seu browser Chrome Devtools Windows (F12) - Mac (cmd + opt + i)
17. 6º - Eu escreveria isso a mão?
18. 7º - Use um normalizador de CSS O normalize.css é seu amigo e continuará sendo por muito tempo.
19. O normalize garante consistência em situações onde o reset não atua.
20. http://necolas.github.io/normalize.css/
21. 8º - box-sizing: border-box; Box-sizing: border-box; só não é default por um erro do CSSWG
22. Box-sizing padrão considera que o width trata o tamanho do conteúdo Dessa forma ele ignora padding e border no tamanho final
23. Regra não escrita do front-end: Siga o @sergio_caelum http://sergiolopes.org/css-box-sizing-border-box/
24. 9º - Nunca use !important E nunca diga nunca!
26. 9.1 - Para resolver rapidamente bugs de produção E apenas pelo tempo necessário para investigar e codar a solução definitiva.
27. 9.2 - Para testes rápidos Apenas durante o desenvolvimento, quando ignorar a cascata for o caminho mais curto para o teste.
28. 9.3 - Para garantir imutabilidade. Quando for necessário garantir que um elemento não pode ser alterado pelo usuário.
29. Código escalável é negócio escalável E essas lições que aprendi me ajudaram a garantir que sou capaz de criar produtos que escalem minha carreira.
30. Não são regras escritas em pedra. Seja adaptável, respeite seu tempo e nunca deixe de aprender.
31. Obrigado! Github: @mendrone Twitter: @vhmendrone Telegram: @vhmendrone