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
100
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
94
Utility CSS 2019
dfosco
0
48
UX Design – What, Why, How
dfosco
0
140
Portfolio Talk
dfosco
0
91
Utility CSS
dfosco
2
65
UX Design – Primeiros Passos
dfosco
1
110
Other Decks in Programming
See All in Programming
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
180
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
Enhancing Applications with Accessibility API
kishikawakatsumi
3
1k
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
140
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
3.2k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
7.6k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A Philosophy of Restraint
colly
195
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
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