Organising Stylesheets and the BEM methodology

Transcript

1. Organising stylesheets and the BEM methodology Benoît Burgener @LeBenLeBen WebMardi 4 nov. 2014 Liip LS
2. Front-end environments becomes bigger every day
3. There’s hundreds of devices using various browsers Image source: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
4. We have to think and plan
 before coding
5. Split into modules Review the designs to find patterns
12. Challenge the design Does it really worth it? Image source: http://brushfirecreative.com/from-designer-to-developer/
13. Not the content Describe the styling purpose
14. <div class="user-card"> <img src="images/user.png"> <span class="username">John Doe</span> </div> John Doe
15. <div class="media"> <img src="images/user.png"> <span class="username">John Doe</span> </div> John Doe
16. Image source: http://www.stubbornella.org/content/2010/06/21/css-granularity-architecture/
17. Reduce specificity Simplify selectors
18. • CSS declarations precedence is a nightmare • Never style using IDs • If you really have to, use • Do not include <elements/> in your declarations • Use classes! • And don’t nest them for god sake [id="#shame"]
19. Name smartly Think reusable
20. Too precise or too vague .button-red .box-bordered .strong .small .span-240px
21. Good, reusable naming .button-primary .box-alt .button-strong .text-small .span-3
22. Split the code The power of preprocessors
23. • Settings variables • Tools mixins, functions • Generic reset, normalize • Base body, h1, p, … • Objects .media, .tabs, .list, … • Status .is-active, .is-hidden, …
24. Recap • Stop thinking about pages, think modules • Solve problems, challenge the design if you need to • Describe the styling purpose, not the content • Reduce specificity of your selectors • Name elements insightfully • Split the code into multiple files easily findable
25. B.E.M.
26. Yandex « BEM is a methodology of web projects development, that allows you to divide an interface into logically independent blocks. »
27. Block Element Modifier <div class="block block--modifier"> <span class="block__element"></span> </div>
29. <a href="#" class="button button-- primary button--block">Click me</a>
30. <div class="user-card media media--wide"> <a href="#" class="media__link"> <img src="image.png" class="media__img user-card__avatar"> </a> <div class="media__content"> Hello there </div> </div>
31. The problems • Difficult to use with some CMS • Weird to couple with a framework like Bootstrap • Short list of resources
32. Harry Roberts csswizardry.com @csswizardry
33. « Inuit.css is a Sass based, Object Oriented framework built on a BEM-style naming convention. »
34. block buttons flag images list-bare list-block list-inline list-ui media normalize pack print responsive spacing spacing-responsive tables tabs widths
35. Questions? Or any experience you want to share?
36. Thanks! @LeBenLeBen