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
CSS Modular — Boas Práticas e Bizus
Search
Daniel Fosco
July 06, 2015
Programming
1
110
CSS Modular — Boas Práticas e Bizus
Lightning Talk dado no VTEX Lab em 06/07/2015
Daniel Fosco
July 06, 2015
Tweet
Share
More Decks by Daniel Fosco
See All by Daniel Fosco
Let's talk about design portfolios
dfosco
3
110
Utility CSS 2019
dfosco
0
82
UX Design – What, Why, How
dfosco
0
180
Portfolio Talk
dfosco
0
110
Utility CSS
dfosco
2
71
UX Design – Primeiros Passos
dfosco
1
120
Other Decks in Programming
See All in Programming
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.5k
Swift Updates - Learn Languages 2025
koher
2
450
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.4k
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
MLH State of the League: 2026 Season
theycallmeswift
0
220
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
200
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
740
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
480
アセットのコンパイルについて
ojun9
0
110
Kiroで始めるAI-DLC
kaonash
2
560
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Why Our Code Smells
bkeepers
PRO
339
57k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Become a Pro
speakerdeck
PRO
29
5.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Unsuck your backbone
ammeep
671
58k
Six Lessons from altMBA
skipperchong
28
4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Transcript
CSS MODULAR BOAS PRÁTICAS E BIZUS NOTDANIELFOSCO 1
CSS MODULAR 2
UMA COISA É UMA COISA E OUTRA COISA É OUTRA
COISA 3
4
BACANA 5
BOSTA 6
REACT 7
UI MATTER 8
COMPONENTES DE UI PADRÃO DA VTEX 9
COMPONENTES DE UI PADRÃO DA VTEX Pode Melhorar 10
Como? 11
MARKUP SEMÂNTICO ! 12
“NO ITEMS YET” UM ÚNICO COMPONENTE... 13
...MAIS DE UMA CLASSE NO MARKUP <div class="uim-no-items well text-muted
text-center"> ... </div> .uim-no-items { ... } 14
UMA COISA É UMA COISA E OUTRA COISA É OUTRA
COISA 15
SOLUÇÃO (COM LESS) <div class="uim-no-items"> ... </div> .uim-no-items { .well;
.text-muted; .text-center; ... } 16
SOLUÇÃO (COM SCSS) <div class="uim-no-items"> ... </div> .uim-no-items { @extend
.well; @extend .text-muted; @extend .text-center; ... } 17
SOLUÇÃO (COM SCSS AINDA MELHOR) <div class="uim-no-items"> ... </div> .uim-no-items
{ %extend .well; %extend .text-muted; %extend .text-center; ... } 18
(NUM MUNDO IDEAL, NEM USARÍAMOS MAIS BOOTSTRAP, APENAS ESTILOS CRIADOS
INTERNAMENTE) 19
NESTING 20
MIGA, APENAS PARE ! 21
PERFORMANCE DO CAPETA ! 22
.card { background: blue; .card-title { font-size: 1.2em; } .card-image
{ img { width: 100px; } } p { font-size: 1em; } } 23
.card { background: blue; } .card .card-title { font-size: 1.2em;
} .card .card-image img { width: 100px; } .card p { font-size: 1em; } 24
CSS VINCULADO AO HTML... 25
<div class="card"> <h1 class="card-title">Very nice card</h1> <div class="card-image"> <img src="#"
alt=""> </div> <p>Wow, much nice</p> </div> 26
<h1 class="card-title">Very nice card</h1> <div class="card"> <div class="card-image"> <img src="#"
alt=""> </div> <p>Wow, much nice</p> </div> 27
QUEBRA NO CSS QUANDO MUDA A ESTRUTURA DO MARKUP !
28
POR ÚLTIMO... 29
INCEPTION MALDITO ! 30
QUANDO USAR NESTING ! 31
PSEUDO-CLASSES ! 32
.card { background: blue; &:focus {...}; &:hover {...}; &:last-child {...}
} 33
BOM SENSO ! 34
.card { background: blue; & + & {...}; img {
... } } 35
COMO ORGANIZAR SUAS CLASSES? 36
BEM 37
BLOCK ELEMENT MODIFIER 38
BLOCK ELEMENT MODIFIER 39
BLOCK ELEMENT MODIFIER 40
.block {...} .block__element {...} .block--modifier {...} 41
.card { background: blue; } 42
.card { background: blue; } .card__title { font-size: 1.2em; }
43
.card { background: blue; } .card__title { font-size: 1.2em; }
.card--big { .card; width: 100%; } 44
.card { background: blue; } .card__title { font-size: 1.2em; }
.card__text { font-size: 1em; } .card--is-active { .card; opacity: 1; } 45
FUTURO 46
REACT CSS MODULES 47
.card { background: blue; } .card { background: red; }
48
https://github.com/css-modules 49
OBRIGADO NOTDANIELFOSCO 50