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
70
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
94
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
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
950
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
360
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
260
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
320
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
180
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
800
AI エージェントと考え直すデータ基盤
na0
18
7.5k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
スタックチャン家庭用アシスタントへの道
kanekoh
0
110
Featured
See All Featured
It's Worth the Effort
3n
185
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Docker and Python
trallard
45
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
A designer walks into a library…
pauljervisheath
207
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Making Projects Easy
brettharned
116
6.3k
Raft: Consensus for Rubyists
vanstee
140
7k
Facilitating Awesome Meetings
lara
54
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
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 newbiz@work.co work.co