BEM // Get Started // SASS Guidelines

Intro to BEM. SASS Guidelines.

Transcript

1. BEM Get Started SASS Guidelines @jughosta
2. BEM • Block • Element • Modifier More info https://en.bem.info/methodology/
3. BEM // Block <section class="search"> ... </section>
4. BEM // Element <section class="search"> <div class="search__content"> ... </div> ... </section>
5. BEM // Element <section class="search"> <div class="search__content"> ... </div> <input type="text" class="search__input"> </section>
6. BEM // Element <section class="search"> <div class="search__content"> <input type="text" class="?"> </div> ... </section>
7. BEM // Element <section class="search"> <div class="search__content"> <input type="text" class="search__input"> </div> ... </section>
8. BEM // Block inside Element <section class="search"> <div class="search__content"> <input type="text" class="search__input"> <button class="button">Search</button> </div> ... </section>
9. BEM // Element for additional styles (margins, ...) <section class="search"> <div class="search__content"> <input type="text" class="search__input"> <button class="button" style="margin-left: 30px">Search</button> </div> ... </section>
10. BEM // Element for additional styles (margins, ...) <section class="search"> <div class="search__content"> <input type="text" class="search__input"> <div class="search__button"> <button class="button">Search</button> </div> </div> </section>
11. BEM // Modifier <section class="search"> <div class="search__content"> <input type="text" class="search__input"> <div class="search__button"> <button class="button button--small">Search</button> </div> </div> </section>
12. BEM // Modifier name + value <section class="search"> <div class="search__content"> <input type="text" class="search__input"> <div class="search__button"> <button class="button button--size-small">Search</button> </div> </div> </section>
13. BEM with CSS Block .block { … } Element .block__element { … } Modifier .block--modifier { … } .block__element--modifier { … }
14. BEM with SASS .block { &--modifier { … } } .block__element { … } // searchable
15. BEM with SASS .block { &--modifier { … } } .block__element { … } @include media($mq) { … // same structure here }
16. BEM with SASS .block { ... &:hover { … } &:before { … } &--modifier { … } } .block__element { … } .block__long-element-name-here { … }
17. SASS Code Style • Always use .class selectors • No #id as a selector • No tag as a selector • Max 2 levels for nesting • .util-text-overflow-break • .layout-page • 0, not 0px • #ccc, not #cccccc or #CCC • … More info https://sass-guidelin.es/
18. CSS properties order .selector { /* Positioning */ /* Display & Box Model */ /* Color */ /* Text */ /* Other */ } More info https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
19. Thanks Q&A