Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Workshop SASS for BEM development

Workshop SASS for BEM development

This workshop was made for the CSSDay 2018 conference @ Faenza, Italy

Vittorio Vittori

March 15, 2018
Tweet

More Decks by Vittorio Vittori

Other Decks in Programming

Transcript

  1. Hi, I’m Vittorio 2 I do frontend stuff @ ideato

    Mainly CSS and HTML vit.to/about github.com/vitto linkedin.com/in/vittoriovittori
  2. Workshop contents Practice • Installation • Let’s make some layout

    • Now it’s components time • Scalability conclusions Theory • What is BEM • What to DO and NOT to do • Exercise: Let’s draw some BEM • Some CSS and SASS • What to DO and NOT to do 3
  3. 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
  4. 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
  5. 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
  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 Block Block Block Block 8
  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 .post .share 9
  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 Model Context Action 10 Layout
  9. Block Be atomic, if you find a context, probably this

    is a block 11 .header .header-menu Context Layout Atom Atom
  10. 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 Context Atom Atom
  11. 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
  12. 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
  13. 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
  14. 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 Context Layout
  15. Don’t Don’t use deeper nesting. BEM is designer to keep

    stuff simple and clean. Only blocks has elements, there aren’t element’s elements. .modal 18 .modal__header .modal__header__title
  16. Do If elements are nested, just nest them without use

    naming concatenation. 19 .modal .modal__header .modal__title
  17. Modifier Flags on blocks or elements. Use them to change

    appearance, behavior or state. Block + Block’s modifier 20 Element + Element’s modifier Element + Element’s modifier
  18. Modifier Flags on blocks or elements. Use them to change

    appearance, behavior or state. 21 Button + Warning Button + Featured Button + Close Button + Disabled
  19. 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
  20. 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
  21. Don’t Don’t use style infos as modifiers, doesn’t 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
  22. 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
  23. Don’t Don’t use alone modifiers. They suffers of abandonment syndrome.

    Modifiers are meant to modify, not to be. .post .post__header .post__title--featured 26
  24. Do .post Modifiers are meant to modify things, not to

    be things. Every modifier has it’s block or element and they can be concatenated. .post__header .post__title .post__title--featured .post__title--old 27
  25. Don’t Don’t nest selectors in CSS, doesn’t 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; }
  26. 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; }
  27. Don’t 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; }
  28. 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; }
  29. Don’t Avoid !important, it should be used only on modifiers,

    if needed. 34 // CSS .modal { background-color: black !important; } .modal--problem { background-color: red; }
  30. Don’t Avoid !important on modifiers, if they don’t give anything

    more to your code. 35 // CSS .modal { background-color: black; } .modal--problem { background-color: red !important; }
  31. 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; } }
  32. 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; } } }
  33. Don’t 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; } } }
  34. 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; } }
  35. 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
  36. Do not duplicate code, it can became an hell when

    you need to scale it. Don’t 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; }
  37. Do not exagerate with refactoring or you’ll just write code

    twice. Don’t 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; }
  38. Do not exagerate with refactoring or you’ll just write code

    twice. Be forced to override properties is a bad smell of bad scaling. Don’t 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; ⬅ }
  39. Do When you find duplicates, it’s 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; }
  40. 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, it’s ok, it’s the right way a developer does, organize code when needed. Only if your project needs to be scalable, this doesn’t mean write bad code, but write the code you need. 46 Answer
  41. 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 it’s time to split it on two different grid components. 47 Answer
  42. 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 • It’s time consuming • It’s hard to naming things • Verbose selectors naming 48 Cons