Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Organising Stylesheets and the BEM methodology

Organising Stylesheets and the BEM methodology

Benoît Burgener

November 04, 2014

More Decks by Benoît Burgener

Other Decks in Programming


  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

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. Challenge the design Does it really worth it? Image source:

  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>

  28. None
  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