Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Future Proof CSS
Search
Vitor Mendrone
June 21, 2018
Programming
1
95
Future Proof CSS
Vitor Mendrone
June 21, 2018
Tweet
Share
More Decks by Vitor Mendrone
See All by Vitor Mendrone
Como se tornar indispensável em um mercado em crise?
mendrone
0
74
Expressões Regulares
mendrone
0
30
A arte da composição
mendrone
0
20
Como escolher uma stack para meu projeto?
mendrone
0
17
Future Proof CSS - 2019
mendrone
0
71
Vue.js - O Antes, o Durante e o Depois
mendrone
0
100
High Speed Workflow
mendrone
4
130
Usabilidade - O bom senso é o seu melhor amigo
mendrone
0
79
Um Simples Checkup Pode Salvar a Sua Loja Virtual
mendrone
0
56
Other Decks in Programming
See All in Programming
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
11
2.5k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
220
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
220
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
CSC305 Summer Lecture 12
javiergs
PRO
0
130
速いWebフレームワークを作る
yusukebe
3
810
AHC051解法紹介
eijirou
0
640
AWS発のAIエディタKiroを使ってみた
iriikeita
1
130
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
270
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
OSS開発者という働き方
andpad
5
1.6k
Featured
See All Featured
KATA
mclloyd
32
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Six Lessons from altMBA
skipperchong
28
4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
207
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Transcript
Future Proof CSS Criando folhas de estilo resistentes ao tempo
// Vitor Mendrone // Senior Front-end Engineer
None
CSS já me f*%# pra car&*#$! Provável ferramenta utilizada na
criação do CSS
O sofrimento é um grande professor. E me ensinou algumas
lições.
1º - Aprenda com os designers de UX Planejamento é
tudo.
Seu trabalho precisa gerar valor mesmo quando você não está
codando.
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.
2º - Seu CSS deve ser sempre 'HTML Agnostic' Evite
ao máximo utilizar seletores de tags (type selectors) em suas folhas de estilo.
Place your code snippet here Remember: that a presentation, be
careful with big chunks of code
Place your code snippet here Remember: that a presentation, be
careful with big chunks of code
3º - Não tenha medo de inserir novos elementos HTML
Não é errado incluir novos elementos desde que sirvam para criar componentes mais robustos
Place your code snippet here Remember: that a presentation, be
careful with big chunks of code
4º - Utilize sempre o mínimo seletor viável. Se possível,
substitua seletores aninhados por novas classes
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
Use e abuse das devtools do seu browser Chrome Devtools
Windows (F12) - Mac (cmd + opt + i)
6º - Eu escreveria isso a mão?
7º - Use um normalizador de CSS O normalize.css é
seu amigo e continuará sendo por muito tempo.
O normalize garante consistência em situações onde o reset não
atua.
http://necolas.github.io/normalize.css/
8º - box-sizing: border-box; Box-sizing: border-box; só não é default
por um erro do CSSWG
Box-sizing padrão considera que o width trata o tamanho do
conteúdo Dessa forma ele ignora padding e border no tamanho final
Regra não escrita do front-end: Siga o @sergio_caelum http://sergiolopes.org/css-box-sizing-border-box/
9º - Nunca use !important E nunca diga nunca!
None
9.1 - Para resolver rapidamente bugs de produção E apenas
pelo tempo necessário para investigar e codar a solução definitiva.
9.2 - Para testes rápidos Apenas durante o desenvolvimento, quando
ignorar a cascata for o caminho mais curto para o teste.
9.3 - Para garantir imutabilidade. Quando for necessário garantir que
um elemento não pode ser alterado pelo usuário.
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.
Não são regras escritas em pedra. Seja adaptável, respeite seu
tempo e nunca deixe de aprender.
Obrigado! Github: @mendrone Twitter: @vhmendrone Telegram: @vhmendrone