Modular Front-End Development With Sass & BEM

A talk given to the students of the University of Gloucestershire on March 14th 2016. It was part of their "WebX" event where they invited people from industry to give talks to enhance their learning.

Transcript

1. Modular Front-End Development With Sass & BEM Andy Bell @hankchizljaw - hankchizljaw.io
2. Worked With
3. Designer At
4. A Brief Intro To
5. What Is Sass?
6. Sass file (e.g. cat.scss) Compiler (e.g. Grunt/Gulp, CodeKit, Prepros) CSS File is produced and is read by the browser as usual
7. A Quick Example http:/ /codepen.io/hankchizljaw/pen/VaewXx
9. <figure class="cat"> <img src="/cat.jpg" alt="Cat wants some tuna" /> <figcaption> Image courtesy cheeseburger.com </figcaption> </figure> The Old Way: HTML
10. .cat { border: 1px solid #ccc; width: 200px; font-family: sans-serif; } The Old Way: CSS
11. .cat img { width: 100%; height: auto; } The Old Way: CSS
12. .cat figcaption { font-style: italic; color: #555; display: block; padding: 5px 5px; } The Old Way: CSS
14. The Sass Way http:/ /codepen.io/hankchizljaw/pen/zqrxYP
15. $grey: #ccc; $dark-grey: #555; The Sass Way: SCSS
16. .cat { border: 1px solid $grey; width: 200px; font-family: sans-serif; } The Sass Way: SCSS
17. .cat figcaption { font-style: italic; color: $dark-grey; display: block; padding: 5px 5px; } The Sass Way: SCSS
18. Nesting
19. .cat { ... img { ... } figcaption { ... } } The Sass Way: SCSS
20. Compiles To
21. .cat { ... } .cat img { ... } .cat figcaption { ... } The Sass Way: CSS
22. Mixins
23. @mixin caption($is_italic: false) { color: $dark-grey; display: block; padding: 5px 5px; @if($is_italic) { font-style: italic; } } The Sass Way: SCSS
24. .cat { ... img { ... } figcaption { @include caption(true); } } The Sass Way: SCSS
25. Simple Modularisation
26. _partial-1.scss _partial-2.scss _partial-3.scss main.scss main.css
27. A Brief Intro To BEM
28. Block .cat Element .cat__image Modifier .cat--large
29. Let’s Implement Our Cat Example http:/ /codepen.io/hankchizljaw/pen/wGGBvL
30. <figure class="cat"> <img src="/cat.jpg" class="cat__image" /> <figcaption class="cat__caption"> Image courtesy cheeseburger.com </figcaption> </figure> The BEM Way: HTML
31. <figure class="cat cat--large"> <img src="/cat.jpg" class="cat__image" /> <figcaption class="cat__caption"> Image courtesy cheeseburger.com </figcaption> </figure> The BEM Way: HTML BLOCK MODIFIER ELEMENT
32. 2. Clear HTML to partial & module relationship Markup can be different from instance to instance 1.
33. <div class="cat"> <img src="/cat.jpg" class="cat__image" /> <p class="cat__caption"> Image courtesy cheeseburger.com </p> </div> Markup can be different from instance to instance: HTML
34. <header class="headline"> <h1 class="headline__heading"> A top level heading </h1> </header> <header class="headline"> <h2 class="headline__heading"> A second level heading </h2> </header> Markup can be different from instance to instance: HTML
35. 2. Clear HTML to partial & module relationship Markup can be different from instance to instance 1.
36. <div class="cat"> <img src="/cat.jpg" class="cat__image" <p class="cat__caption"> Image courtesy cheeseburger.com </p> </div> Clear HTML to partial relationship _cat.scss
37. How Does This Work With Sass?
38. My Best Friend, The &
39. .cat { ... &__caption { ... } &__image { ... } } The Ampersand: SCSS
40. Compiles To
41. .cat { ... } .cat__caption { ... } .cat__image { ... } The Ampersand: CSS
42. Reduced Specificity FTW!!
43. Let’s Stick In A Modifier
44. .cat { ... &--large { width: 500px; } } The Ampersand: SCSS
45. <figure class="cat cat--large"> <img src="/cat.jpg" class="cat__image" /> <figcaption class="cat__caption"> Image courtesy cheeseburger.com </figcaption> </figure> The BEM Way: HTML BLOCK MODIFIER ELEMENT
47. To Recap
48. Using Sass helps us to create smaller partials & modules that compile to one file. This helps create a manageable codebase.
49. Using BEM can help expand on that by allowing us to write flexible markup with a clear path to the module or partial.
50. Thank You @hankchizljaw - hankchizljaw.io