Who the fuck is BEM?

4b37957fd2ddcbe5b4dd4a8159270e02?s=47 Dave Redfern
November 18, 2014

Who the fuck is BEM?

Creating manageable code is key to the success of any project. CSS pre-processors are awesome but with BEM as it’s partner in crime you have a powerful combination for front end development.

4b37957fd2ddcbe5b4dd4a8159270e02?s=128

Dave Redfern

November 18, 2014
Tweet

Transcript

  1. Who the f*** is BEM?

  2. Design Frontend Development Programming

  3. Design Frontend Development Programming Spec changes New sections & functionality

    Developer joins project Client feedback
  4. Collaboration at every stage

  5. Unmaintainable & bloated code

  6. BEM

  7. Block Element Modifier

  8. Block

  9. Element

  10. Modifier

  11. .person {} .person__hand {} .person--female {} .person--female__hand {} .person__hand--left {}

  12. Example

  13. Example

  14. Example

  15. Reduces code All in all Transferable between projects Maintainable code

    Works perfectly with modular web design
  16. Dave Redfern @daveredfern