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 - 2019
Search
Vitor Mendrone
May 03, 2019
Technology
0
71
Future Proof CSS - 2019
Vitor Mendrone
May 03, 2019
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
Vue.js - O Antes, o Durante e o Depois
mendrone
0
100
Future Proof CSS
mendrone
1
95
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 Technology
See All in Technology
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
2
380
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
310
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
250
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.5k
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
140
Browser
recruitengineers
PRO
7
2.1k
実践AIガバナンス
asei
3
270
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
100
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
130
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Side Projects
sachag
455
43k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Why Our Code Smells
bkeepers
PRO
339
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Applications with DynamoDB
mza
96
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Future Proof CSS Escrevendo folhas de estilo resistentes ao tempo
OLÁ! Vitor Mendrone Senior Software Developer
None
CSS já me fo&*% pra cara&*%
O sofrimento é um grande professor E me ensinou algumas
coisas
Aprenda com os Designers de UX Planejamento é tudo
01 SEU TRABALHO PRECISA GERAR VALOR MESMO QUANDO VOCÊ NÃO
ESTÁ CODANDO
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
Seu CSS deve ser sempre HTML Agnostic Evite ao máximo
utilizar seletores de tags (type selectors) em suas folhas de estilo.
Don’t
Do
Não tenha medo de inserir novos elementos HTML Não é
errado incluir novos elementos desde que sirvam para criar componentes mais robustos
None
Caption Utilize sempre o mínimo seletor viável. Se possível, substitua
seletores aninhados por novas classes 4
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
Eu escreveria isso a mão? 6
Eu escreveria isso a mão?
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/
box-sizing: border-box; Box-sizing: border-box; só não é default por um
erro do CSSWG
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
Regra não escrita do front-end: Siga o @sergio_caelum http://sergiolopes.org/css-box-sizing-border-box/
09 NUNCA USE !IMPORTANT E nunca diga nunca!
9.1 E apenas pelo tempo necessário para investigar e codar
a solução definitiva. Para resolver rapidamente bugs de produção
9.2 Apenas durante o desenvolvimento, quando ignorar a cascata for
o caminho mais curto para o teste. Para testes rápidos
9.2 Quando for necessário garantir que um elemento não pode
ser alterado pelo usuário. Para garantir imutabilidade.
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.
Work & Co 231 Front St, 5th Floor, Brooklyn, NY
11201 +1 347-470-4803
[email protected]
work.co