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