BEM

Talk about Block, Elements and Modifiers.

Transcript

1. BEM Blocks, Elements and Modifiers Felipe Soares
2. FELIPE SOARES Apreciador de abacaxis github.com/felipesoares6 speakerdeck.com/felipesoares6 Front-end Developer Estagiário na Codeminer 42
4. Bem is Blocks Elements and Modifiers
5. Bem is Is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. Understand the relationship between the HTML and CSS in a given project.
6. BLACK blocs
7. Blocks
8. Blocks A functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute.
9. Blocks The block name describes its purpose ("What is it?" — menu or button).
10. Blocks can be nested in each other. You can have any number of nesting levels. Blocks
11. <header class="header"> <div class="logo"></div> <form class="search-form"></form> </header>
12. Elements
13. Elements A composite part of a block that can't be used separately from it.
14. Elements The element name describes its purpose ("What is this?" — item, text, etc.) The structure of an element's full name is block-name__element-name.
15. Elements can be nested inside each other. You can have any number of nesting levels. Elements An element is always part of a block, not another element.
16. <form class="search-form"> <input class="search-form__input"> <button class="search-form__button"> Search </button> </form>
17. Modifiers
18. Modifiers An entity that defines the appearance, state, or behavior of a block or element.
19. Modifiers The modifier name describes its appearance ("What size?" or "Which theme?" and so on — theme_islands), state ("How is it different from the others?" — disabled, focused), behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
20. From the BEM perspective, a modifier can't be used in isolation from the modified block or element. Modifiers A modifier should change the appearance, behavior, or state of the entity, not replace it.
21. <form class="search-form search- form--focused"> <input class="search-form__input"> <button class=" search-form__button--disabled"> Search </button> </form>
22. Should I create a block or an element?
23. If a section of code might be reused and it doesn't depend on other page components being implemented, you should create a block.
24. If the section of code can't be used separately without the parent entity (the block), an element is usually created.
25. SASS WAY
26. .search-form { background-color: red; &__button { margin: 20px; &--disabled { display: none; } } } .form { display: flex; &--focused { color: black; } }
27. That’s all folks! flw vlw gretchen https://en.bem.info/ https://css-tricks.com/bem-101/ http://getbem.com/introduction/ https://unsplash.com/@pineapple