CSS Modules with BEM Consistent Design Consistent Design Different - - PowerPoint PPT Presentation

▶
css modules with bem consistent design consistent design
SMART_READER_LITE
LIVE PREVIEW

CSS Modules with BEM Consistent Design Consistent Design Different - - PowerPoint PPT Presentation

Jan 05, 2023 807 likes •1.06k views

CSS Modules with BEM Consistent Design Consistent Design Different Module Versions Consistent Design Different Module Versions Combine Small Modules Non-modular Naming CSS Selector Nesting CSS Selector Nesting #2 Block-Element-Modifier

slide-1
SLIDE 1

CSS Modules with BEM

slide-2
SLIDE 2
slide-3
SLIDE 3

Consistent Design

slide-4
SLIDE 4

Consistent Design Different Module Versions

slide-5
SLIDE 5

Consistent Design Different Module Versions Combine Small Modules

slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8

Non-modular Naming

slide-9
SLIDE 9

CSS Selector Nesting

slide-10
SLIDE 10
slide-11
SLIDE 11

CSS Selector Nesting #2

slide-12
SLIDE 12

Block-Element-Modifier (BEM)

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20

Writing BEM in Sass/Less

slide-21
SLIDE 21

Sass ... & feature

slide-22
SLIDE 22

Styling Elements Based on Block Modifiers

slide-23
SLIDE 23

BEM

Yandex: bem.info Harry Roberts: MindBEMding blog post

slide-24
SLIDE 24

Thank You

@mattzeunert