Developer, improve your DOM structure with BEM

Transcript

1. Developper, improve your DOM structure with BEM Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
2. Johnathan MEUNIER @JohnathanSUP JohnMeunier Software engineer Full Stack JS www.johnathan.fr - www.lilleweb.fr
3. Samuel GOMEZ @Gamuez Samuel-gomez Lead front-end www.samuelgomez.fr
4. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr -Ohans Emmanuel, CSS Naming Conventions that Will Save You Hours of Debugging « I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS. »
5. CSS Examples Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
6. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr CSS Examples div#wall .parent #tag-5.slick {}
7. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr CSS Examples #full #half-b .title {}
8. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr CSS Examples .vb-homepage-item-medium .ctas .cta + .cta, .vb- homepage-item-large .ctas .cta + .cta {}
9. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr CSS Examples [id=homepage-item-zone2-pdfBis] .inside .cta {}
10. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr CSS Examples VS Code Can Do That : Previews - CSS
11. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Problems • Unreadable selector • Complicated precedence • Non isolated style • DRY ??? What’s bad here ?
12. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
13. BEM Convention Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
14. Atomic Design
15. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr -Audrey Hacq « Le travail du designer d’interface est de définir la bonne typographie, les bonnes couleurs, les bons rapports de hiérarchies, les bons composants graphiques et de faire marcher ces éléments ensemble, de leur donner du sens. »
16. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AXA Sample App React Examples with AXA Toolkit
18. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
26. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .org-block__element—modifier .af-header__logo—active Block is similar to a component. It’s a main part of the UI.
27. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .org-block__element—modifier .af-header__logo—active Element is a part of a block. Its give the possibility to split a block in several parts
28. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .org-block__element- -modifier .af-header__logo- -active A modifier allows to change the state of a tag
29. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .org-block__element- -modifier .af-header__logo- -active The organization part avoids conflicts with other CSS Framework
30. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .js-block__element- -modifier .js-header__logo- -active Use specific class to JS selector
31. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Block Element Modifier .(org|js)-block[__element][—modifier]
33. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr English naming Promote English naming Bad ☹ Good .af-utilisateur .af-user .af-metier .af-business .af-sous-activite .af-subactivity
34. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Bad ☹ Good .af-headerTop .af-header-top .af-tmpMetier .af-tmp-metier .af-subActivity .af-sub-activity Kebab Case If the name of your component is too long
35. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr .stick-man{}
36. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr .stick-man__head{} .stick-man__arms{} .stick-man__feet{}
37. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr .stick-man- -blue{} .stick-man- -red{}
38. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr .stick-man__head- -small{} .stick-man__arms- -big{}
39. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Advantages • Pre technical analysis, you will prepare a good structure and be able to discover potential problems of conception • Avoid complicated precedence • Isolated style • Simplify maintaining CSS • Strict format … Why using BEM ?
40. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Cons • … Strict format • Difficulties to find a good name (specially for business terms) Be caution
41. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr -Phil Karlton « There are only two hard problems in Computer Science: cache invalidation and naming things »
42. Usage Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr
43. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Usage <Header> <Logo></Logo> <Nav></Nav> <User></User> </Header> Main
44. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AngularJS Directive are visible in DOM. We have to think about this point when we split our components and we create classes. Classes will be written directly on the directive
45. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AngularJS <Header class="af-header"> <Logo class="af-logo"></Logo> <Nav class="af-nav"></Nav> <User class="af-user"></User> </Header> Main
46. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AngularJS <img class="af-logo__img"/> Logo
47. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AngularJS <h4 class="af-user__name">Joh</h4> <a href="/logout" class="af-user__logout"> Logout </a> User
48. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr AngularJS <h4 class="af-user__name">Joh</h4> <a href="/logout" class="af-user__logout af-user__logout{{ disabled}}"> Logout </a> User
49. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr React Tags aren't directly visible in DOM. We will write our class on the first tag of each components.
50. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr React <Header> <Logo></Logo> <Nav></Nav> <User></User> </Header> Main
51. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr React <div className="af-logo"> <img className="af-logo__img"/> </div> Logo
52. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr React <div className="af-user"> <h4 className="af-user__name">Joh</h4> <a href="/logout" className="af-user__logout"> Logout </a> </div> User
53. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr React <div className="af-user"> <h4 className="af-user__name">Joh</h4> <a href="/logout" className="af-user__logout--disable"> Logout </a> </div> User
54. Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr Useful and inspirational links L’atomic design, une méthode de co-création prometteuse Key concepts / Methodology / BEM Petite définition de BEM Fifty Shades of BEM - Ministry of Interface sturobson/BEM-resources: Just a repo full of BEM CSS Naming Conventions that Will Save You Hours
55. Thank you ! Developper, improve your DOM structure with BEM Johnathan MEUNIER • @JohnathanSUP Samuel GOMEZ • samuelgomez.fr