際際滷

際際滷Share a Scribd company logo

Workshop SASS for BEM development

Vittorio Vittori
Vittorio Vittori

This document summarizes a workshop on using BEM methodology and SASS for frontend development. The workshop covers installing and using BEM for layouts and components, the principles of BEM naming conventions, and best practices for writing scalable, maintainable CSS code with SASS. Attendees will learn about blocks, elements, and modifiers in BEM, how to avoid deep nesting in CSS, and techniques for refactoring code to reduce duplication while keeping selectors simple. The presentation emphasizes writing semantic, modular CSS through proper application of BEM and use of mixins and extends in SASS.

1 of 50
Download to read offline
Workshop SASS for BEM development by Vittorio Vittori
Hi, Im Vittorio 2 I do frontend stuff @ ideato Mainly CSS and HTML vit.to/about github.com/vitto linkedin.com/in/vittoriovittori
Workshop contents Practice Installation Lets make some layout Now its components time Scalability conclusions Theory What is BEM What to DO and NOT to do Exercise: Lets draw some BEM Some CSS and SASS What to DO and NOT to do 3
BEM Block Element Modifier 4
A brief history BEM was created at Yandex by Vitaly Harisov as main author en.bem.info/methodology assortment.io/posts/introducing-bem-css-naming-convention smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problem s-and-how-to-avoid-them/ 5
Block Block Block Block Block Block Block Block Block Block Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming 6
Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .slideshow .menu .post .news .share .footer .social .login 7
Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming Block Block Block Block 8
Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .post .share 9
Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .post .share Model Context Action 10 Layout
Block Be atomic, if you find a context, probably this is a block 11 .header .header-menu ContextLayout Atom Atom
Naming convention block-name __element-name --modifier-name .control-panel .control-panel__button .control-panel__button--login .control-panel--not-logged 12
Block Be atomic, if you find a context, probably this is a block .header 13 Layout .header-menu .header-menu__item .header-menu__item Layout Context ContextAtom Atom
Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming 14 Block Element Element
Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming Post Title hr 15 go Date body infos
Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming .post .post__title .post__hr 16 .post__go .post__date .post__body .post__infos
Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming .post .post__title .post__date .post__hr .post__body 17 Model Model property .post__infos.post__go Action ContextLayout
Dont Dont use deeper nesting. BEM is designer to keep stuff simple and clean. Only blocks has elements, there arent elements elements. .modal 18 .modal__header .modal__header__title
Do If elements are nested, just nest them without use naming concatenation. 19 .modal .modal__header .modal__title
Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. Block + Blocks modifier 20 Element + Elements modifier Element + Elements modifier
Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 21 Button + Warning Button + Featured Button + Close Button + Disabled
Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 22 .button .button--warning .post .post--featured .button .button--close .button .button--disabled
Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 23 .button .button--close .button .button--warning .post .post--featured Meaning Model property .button .button--disabled State Action
Dont Dont use style infos as modifiers, doesnt help devs to understand how layout element works. If this happens, it means you need more infos about the project. .post .post__header .post__title .post__title--bold-underline .post__title--move-bottom .post__title--margin-top 24
Do Use meaning by state, model property or state and reduce style naming on modifiers when you can. .post .post__header .post__title .post__title--featured 25
Dont Dont use alone modifiers. They suffers of abandonment syndrome. Modifiers are meant to modify, not to be. .post .post__header .post__title--featured 26
Do .post Modifiers are meant to modify things, not to be things. Every modifier has its block or element and they can be concatenated. .post__header .post__title .post__title--featured .post__title--old 27
Exercise Lets find blocks on this paper. 28
CSS Cascading Style Sheet 29
Dont Dont nest selectors in CSS, doesnt give anything more of what we need, just makes overriding more difficult. 30 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal .modal__window { background-color: white; }
Do Keep selectors specificity as low as you can, when you can. 31 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__window { background-color: white; }
Dont Every day, when someone mixes coding styles and country languages, somewere in the world, a good front-end developer dies. 32 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__finestra { background-color: white; } .modal__Pulsante--Close { background-color: black; color: white; }
Do Keep selectors specificity as low as you can, when you can. Consistency is the key to work inside a team. 33 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__window { background-color: white; } .modal__button--close { background-color: black; color: white; }
Dont Avoid !important, it should be used only on modifiers, if needed. 34 // CSS .modal { background-color: black !important; } .modal--problem { background-color: red; }
Dont Avoid !important on modifiers, if they dont give anything more to your code. 35 // CSS .modal { background-color: black; } .modal--problem { background-color: red !important; }
Do The !important is not the enemy, it should be used just when needed. 36 // CSS .modal { background-color: black; } .modal--problem { background-color: red !important; } @media (max-width: 768px) { .modal { background-color: blue; } }
SASS Syntactically Awesome Style Sheets 37
BEM coding Write code as simple as you can. sassmeister.com 38 .item { background-color: white; max-width: 400px; width: 100%; &--wide { max-width: 600px; } &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } } }
Dont Nesting is your enemy. This outputs a monster. sassmeister.com 39 .item { background-color: white; max-width: 400px; width: 100%; &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } &__icon { margin-right: 10px; } } }
Do BEM naming convention is your friend. 40 .item { background-color: white; max-width: 400px; width: 100%; &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } } &__icon { margin-right: 10px; } }
How decrease nesting errors? Write SASS mixins that helps you to keep code clean. Go to GitHub and start play: github.com/vitto/workshop-bem-and-sass#play-examples 41
Do not duplicate code, it can became an hell when you need to scale it. Dont 42 .body { font-family: Helvezia, Aria, sans; font-weight: 400; } .button { font-family: HelveziaBold, Aria, sans; font-size: 12px; font-weight: 700; } .title { font-family: HelveziaBold, Aria, sans; font-size: 18px; font-weight: 700; }
Do not exagerate with refactoring or youll just write code twice. Dont 43 %buttons { font-family: HelveziaBold, Aria, sans; font-size: 12px; font-weight: 700; } %titles { font-family: HelveziaBold, Aria, sans; font-size: 18px; font-weight: 700; } .button { @extend %buttons; } .title { @extend %titles; }
Do not exagerate with refactoring or youll just write code twice. Be forced to override properties is a bad smell of bad scaling. Dont 44 %buttons { border-radius: 8px; 皙 font-family: HelveziaBold, Aria, sans; font-size: 12px; 皙 font-weight: 700; } .button { @extend %buttons; } .button-nice { @extend %buttons; border-radius: 0; 皙 font-size: 16px; 皙 }
Do When you find duplicates, its time to make some refactoring. 45 %bold { font-family: HelveziaBold, Aria, sans; font-weight: 700; } .body { font-family: Helvezia, Aria, sans; font-weight: 400; } .button { @extend %bold; font-size: 12px; } .title { @extend %bold; font-size: 18px; }
Question Have I done something wrong due to the fact I need to do some refactoring to my code? Should I write my code scalable proof by the beginning of the project? No, its ok, its the right way a developer does, organize code when needed. Only if your project needs to be scalable, this doesnt mean write bad code, but write the code you need. 46 Answer
Question Should I be generic when I write a component? So using something like .grid for the layout and use it everywhere in the project? The more you are generic, the more you need to make it flexibile. This is a bad smell. A component with a lot of purposes is a bad component. If you notice you are adding a lot of code, maybe its time to split it on two different grid components. 47 Answer
Pros Your project is scalable Devs will understand how the HTML template works very fast Just one level class selectors Conflict proof selectors Flexible end reusable components Nice for teams Its time consuming Its hard to naming things Verbose selectors naming 48 Cons
Now go to the project And lets make some code
Thank you to be here Have a nice 2018!

More Related Content

Workshop SASS for BEM development

  • 1. Workshop SASS for BEM development by Vittorio Vittori
  • 2. Hi, Im Vittorio 2 I do frontend stuff @ ideato Mainly CSS and HTML vit.to/about github.com/vitto linkedin.com/in/vittoriovittori
  • 3. Workshop contents Practice Installation Lets make some layout Now its components time Scalability conclusions Theory What is BEM What to DO and NOT to do Exercise: Lets draw some BEM Some CSS and SASS What to DO and NOT to do 3
  • 5. A brief history BEM was created at Yandex by Vitaly Harisov as main author en.bem.info/methodology assortment.io/posts/introducing-bem-css-naming-convention smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problem s-and-how-to-avoid-them/ 5
  • 6. Block Block Block Block Block Block Block Block Block Block Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming 6
  • 7. Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .slideshow .menu .post .news .share .footer .social .login 7
  • 8. Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming Block Block Block Block 8
  • 9. Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .post .share 9
  • 10. Block Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well. getbem.com/naming .header .control-panel .post .share Model Context Action 10 Layout
  • 11. Block Be atomic, if you find a context, probably this is a block 11 .header .header-menu ContextLayout Atom Atom
  • 13. Block Be atomic, if you find a context, probably this is a block .header 13 Layout .header-menu .header-menu__item .header-menu__item Layout Context ContextAtom Atom
  • 14. Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming 14 Block Element Element
  • 15. Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming Post Title hr 15 go Date body infos
  • 16. Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming .post .post__title .post__hr 16 .post__go .post__date .post__body .post__infos
  • 17. Element Parts of a block and have no standalone meaning. Any element is semantically tied to its block. getbem.com/naming .post .post__title .post__date .post__hr .post__body 17 Model Model property .post__infos.post__go Action ContextLayout
  • 18. Dont Dont use deeper nesting. BEM is designer to keep stuff simple and clean. Only blocks has elements, there arent elements elements. .modal 18 .modal__header .modal__header__title
  • 19. Do If elements are nested, just nest them without use naming concatenation. 19 .modal .modal__header .modal__title
  • 20. Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. Block + Blocks modifier 20 Element + Elements modifier Element + Elements modifier
  • 21. Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 21 Button + Warning Button + Featured Button + Close Button + Disabled
  • 22. Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 22 .button .button--warning .post .post--featured .button .button--close .button .button--disabled
  • 23. Modifier Flags on blocks or elements. Use them to change appearance, behavior or state. 23 .button .button--close .button .button--warning .post .post--featured Meaning Model property .button .button--disabled State Action
  • 24. Dont Dont use style infos as modifiers, doesnt help devs to understand how layout element works. If this happens, it means you need more infos about the project. .post .post__header .post__title .post__title--bold-underline .post__title--move-bottom .post__title--margin-top 24
  • 25. Do Use meaning by state, model property or state and reduce style naming on modifiers when you can. .post .post__header .post__title .post__title--featured 25
  • 26. Dont Dont use alone modifiers. They suffers of abandonment syndrome. Modifiers are meant to modify, not to be. .post .post__header .post__title--featured 26
  • 27. Do .post Modifiers are meant to modify things, not to be things. Every modifier has its block or element and they can be concatenated. .post__header .post__title .post__title--featured .post__title--old 27
  • 28. Exercise Lets find blocks on this paper. 28
  • 30. Dont Dont nest selectors in CSS, doesnt give anything more of what we need, just makes overriding more difficult. 30 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal .modal__window { background-color: white; }
  • 31. Do Keep selectors specificity as low as you can, when you can. 31 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__window { background-color: white; }
  • 32. Dont Every day, when someone mixes coding styles and country languages, somewere in the world, a good front-end developer dies. 32 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__finestra { background-color: white; } .modal__Pulsante--Close { background-color: black; color: white; }
  • 33. Do Keep selectors specificity as low as you can, when you can. Consistency is the key to work inside a team. 33 // CSS .modal { background-color: rgba(0, 0, 0, 0.85); } .modal__window { background-color: white; } .modal__button--close { background-color: black; color: white; }
  • 34. Dont Avoid !important, it should be used only on modifiers, if needed. 34 // CSS .modal { background-color: black !important; } .modal--problem { background-color: red; }
  • 35. Dont Avoid !important on modifiers, if they dont give anything more to your code. 35 // CSS .modal { background-color: black; } .modal--problem { background-color: red !important; }
  • 36. Do The !important is not the enemy, it should be used just when needed. 36 // CSS .modal { background-color: black; } .modal--problem { background-color: red !important; } @media (max-width: 768px) { .modal { background-color: blue; } }
  • 38. BEM coding Write code as simple as you can. sassmeister.com 38 .item { background-color: white; max-width: 400px; width: 100%; &--wide { max-width: 600px; } &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } } }
  • 39. Dont Nesting is your enemy. This outputs a monster. sassmeister.com 39 .item { background-color: white; max-width: 400px; width: 100%; &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } &__icon { margin-right: 10px; } } }
  • 40. Do BEM naming convention is your friend. 40 .item { background-color: white; max-width: 400px; width: 100%; &__title { color: black; font-size: 24px; font-weight: 700; &--warning { color: red; } } &__icon { margin-right: 10px; } }
  • 41. How decrease nesting errors? Write SASS mixins that helps you to keep code clean. Go to GitHub and start play: github.com/vitto/workshop-bem-and-sass#play-examples 41
  • 42. Do not duplicate code, it can became an hell when you need to scale it. Dont 42 .body { font-family: Helvezia, Aria, sans; font-weight: 400; } .button { font-family: HelveziaBold, Aria, sans; font-size: 12px; font-weight: 700; } .title { font-family: HelveziaBold, Aria, sans; font-size: 18px; font-weight: 700; }
  • 43. Do not exagerate with refactoring or youll just write code twice. Dont 43 %buttons { font-family: HelveziaBold, Aria, sans; font-size: 12px; font-weight: 700; } %titles { font-family: HelveziaBold, Aria, sans; font-size: 18px; font-weight: 700; } .button { @extend %buttons; } .title { @extend %titles; }
  • 44. Do not exagerate with refactoring or youll just write code twice. Be forced to override properties is a bad smell of bad scaling. Dont 44 %buttons { border-radius: 8px; 皙 font-family: HelveziaBold, Aria, sans; font-size: 12px; 皙 font-weight: 700; } .button { @extend %buttons; } .button-nice { @extend %buttons; border-radius: 0; 皙 font-size: 16px; 皙 }
  • 45. Do When you find duplicates, its time to make some refactoring. 45 %bold { font-family: HelveziaBold, Aria, sans; font-weight: 700; } .body { font-family: Helvezia, Aria, sans; font-weight: 400; } .button { @extend %bold; font-size: 12px; } .title { @extend %bold; font-size: 18px; }
  • 46. Question Have I done something wrong due to the fact I need to do some refactoring to my code? Should I write my code scalable proof by the beginning of the project? No, its ok, its the right way a developer does, organize code when needed. Only if your project needs to be scalable, this doesnt mean write bad code, but write the code you need. 46 Answer
  • 47. Question Should I be generic when I write a component? So using something like .grid for the layout and use it everywhere in the project? The more you are generic, the more you need to make it flexibile. This is a bad smell. A component with a lot of purposes is a bad component. If you notice you are adding a lot of code, maybe its time to split it on two different grid components. 47 Answer
  • 48. Pros Your project is scalable Devs will understand how the HTML template works very fast Just one level class selectors Conflict proof selectors Flexible end reusable components Nice for teams Its time consuming Its hard to naming things Verbose selectors naming 48 Cons
  • 49. Now go to the project And lets make some code
  • 50. Thank you to be here Have a nice 2018!
AboutCopyright
息 2025 際際滷