Maintainable CSS

Introduction to BEM

Transcript

1. Maintainable CSS with BEM
2. a set of conventions
3. not a library
4. not a framework
5. set of conventions
6. enforce them in code review
7. not a silver bullet
8. writing maintainable CSS is HARD
9. add everything to app.sass
10. app.sass => 1000 LOC
11. too hard to find a selector
12. too easy to overwrite a style
13. not maintainable
14. BEM
15. Block Element Modifier
22. not easily overwritten by accident
24. ugh that's a lot of typing
26. folder structure
27. again, not enforced by any script or framework
28. better to have several small focused files
31. use the power of SASS
32. variables
33. we can change the whole L&F of an app just by modifying one file
35. alternatives
36. SMACSS https://smacss.com/
37. Scalable
 Modular Architecture for CSS
38. Used by TWTBS
39. Selectors tend to be deeply nested
40. Hard to customize
41. It's ok to mix BEM and SMACSS
42. CSSModules
 http://glenmaddern.com/articles/css-modules
43. Gaining a lot of steam in the REACT community
44. It's a step forward over BEM without global namespaces
45. thanks!
46. questions?