BEM Show & Tell @ Space Coworking

Talk presented on weekly sharing & learning meetup @ Space Coworking in Sorocaba, inner Sao Paulo, Brazil

Transcript

1. B.E.M show & tell or: how to stop hating the css you wrote > two weeks ago sharing & learning @ Space felipe bernardes
2. context less, sass, scss nesting, scoping, mixins
3. scss why bother? the sass premisse
4. example @ codepen scss only, not using BEM
5. with BEM you can… - improve readability - scope by default - refactor easily - have a modular css architecture
6. w t f is BEM then? just an approach
7. B is for block and have elements inside it
8. E is for element and are independent
9. M is for modifiers and can be applicable to both blocks and elements
10. example @ codepen scss + BEM
11. case entrylvl blog for tech newcomers
12. refs & resources http://getbem.com/ https://codepen.io/felipebernardes/pen/XZGKgm entrylvl animated logo (scss) https://codepen.io/felipebernardes/pen/rJRLzO buttons (BEM) https://github.com/entrylvl