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
96
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
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
Future Proof CSS - 2019
mendrone
0
72
Vue.js - O Antes, o Durante e o Depois
mendrone
0
100
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 Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
230
CSC305 Lecture 06
javiergs
PRO
0
250
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
CSC509 Lecture 05
javiergs
PRO
0
300
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
320
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
CSC509 Lecture 06
javiergs
PRO
0
260
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
730
理論と実務のギャップを超える
eycjur
0
160
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
Visualization
eitanlees
149
16k
Designing for humans not robots
tammielis
254
26k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
A designer walks into a library…
pauljervisheath
209
24k
The Invisible Side of Design
smashingmag
302
51k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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