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
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Namespace and Its Future
tagomoris
6
710
チームのテスト力を鍛える
goyoki
3
930
API Platform 4.2: Redefining API Development
soyuka
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
1から理解するWeb Push
dora1998
7
1.9k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
rage against annotate_predecessor
junk0612
0
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A Tale of Four Properties
chriscoyier
160
23k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Making Projects Easy
brettharned
117
6.4k
Scaling GitHub
holman
463
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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