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
94
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
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
680
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
350
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
570
CDK引数設計道場100本ノック
badmintoncryer
2
430
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Cult of Friendly URLs
andyhume
79
6.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building Adaptive Systems
keathley
43
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Gamification - CAS2011
davidbonilla
81
5.4k
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