Slide 1
Slide 1 text
Who the
f*** is
BEM?
Slide 2
Slide 2 text
Design Frontend
Development
Programming
Slide 3
Slide 3 text
Design Frontend
Development
Programming
Spec
changes
New sections
& functionality
Developer
joins project
Client
feedback
Slide 4
Slide 4 text
Collaboration
at every stage
Slide 5
Slide 5 text
Unmaintainable
& bloated
code
Slide 6
Slide 6 text
BEM
Slide 7
Slide 7 text
Block
Element
Modifier
Slide 8
Slide 8 text
Block
Slide 9
Slide 9 text
Element
Slide 10
Slide 10 text
Modifier
Slide 11
Slide 11 text
.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}
Slide 12
Slide 12 text
Example
Slide 13
Slide 13 text
Example
Slide 14
Slide 14 text
Example
Slide 15
Slide 15 text
Reduces
code
All in all
Transferable
between
projects
Maintainable
code
Works perfectly
with modular web
design
Slide 16
Slide 16 text
Dave Redfern
@daveredfern