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
72
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
75
Expressões Regulares
mendrone
0
32
A arte da composição
mendrone
0
22
Como escolher uma stack para meu projeto?
mendrone
0
19
Vue.js - O Antes, o Durante e o Depois
mendrone
0
100
Future Proof CSS
mendrone
1
96
High Speed Workflow
mendrone
4
140
Usabilidade - O bom senso é o seu melhor amigo
mendrone
0
80
Um Simples Checkup Pode Salvar a Sua Loja Virtual
mendrone
0
58
Other Decks in Technology
See All in Technology
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
670
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
Kubernetes self-healing of your workload
hwchiu
0
580
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
540
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
360
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
5
1.4k
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
220
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Facilitating Awesome Meetings
lara
57
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing for humans not robots
tammielis
254
26k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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