Future Proof CSS - 2019

Transcript

1. Future Proof CSS Escrevendo folhas de estilo resistentes ao tempo
2. OLÁ! Vitor Mendrone Senior Software Developer
4. CSS já me fo&*% pra cara&*%
5. O sofrimento é um grande professor E me ensinou algumas coisas
6. Aprenda com os Designers de UX Planejamento é tudo
7. 01 SEU TRABALHO PRECISA GERAR VALOR MESMO QUANDO VOCÊ NÃO ESTÁ CODANDO
8. 01 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. Seu CSS deve ser sempre HTML Agnostic Evite ao máximo utilizar seletores de tags (type selectors) em suas folhas de estilo.
10. Don’t
11. Do
12. Não tenha medo de inserir novos elementos HTML Não é errado incluir novos elementos desde que sirvam para criar componentes mais robustos
14. Caption Utilize sempre o mínimo seletor viável. Se possível, substitua seletores aninhados por novas classes 4
15. 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
17. Eu escreveria isso a mão? 6
18. Eu escreveria isso a mão?
19. Use um normalizador de CSS O normalize.css é seu amigo e continuará sendo por muito tempo.
20. O normalize garante consistência em situações onde o reset não atua.
21. http://necolas.github.io/normalize.css/
22. box-sizing: border-box; Box-sizing: border-box; só não é default por um erro do CSSWG
23. 08 BOX-SIZING PADRÃO CONSIDERA QUE O WIDTH TRATA O TAMANHO DO CONTEÚDO Dessa forma ele ignora padding e border no tamanho final
24. Regra não escrita do front-end: Siga o @sergio_caelum http://sergiolopes.org/css-box-sizing-border-box/
25. 09 NUNCA USE !IMPORTANT E nunca diga nunca!
26. 9.1 E apenas pelo tempo necessário para investigar e codar a solução definitiva. Para resolver rapidamente bugs de produção
27. 9.2 Apenas durante o desenvolvimento, quando ignorar a cascata for o caminho mais curto para o teste. Para testes rápidos
28. 9.2 Quando for necessário garantir que um elemento não pode ser alterado pelo usuário. Para garantir imutabilidade.
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. Work & Co 231 Front St, 5th Floor, Brooklyn, NY 11201 +1 347-470-4803 newbiz@work.co work.co