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. Challenge the design Does it really worth it? Image source:

  2. • 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"]
  3. • Settings variables • Tools mixins, functions • Generic reset,

    normalize • Base body, h1, p, … • Objects .media, .tabs, .list, … • Status .is-active, .is-hidden, …
  4. 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
  5. Yandex « BEM is a methodology of web projects development,

    that allows you to divide an interface into logically independent blocks. »
  6. <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>
  7. The problems • Difficult to use with some CMS •

    Weird to couple with a framework like Bootstrap • Short list of resources
  8. block buttons flag images list-bare list-block list-inline list-ui media normalize

    pack print responsive spacing spacing-responsive tables tabs widths