Organising Stylesheets and the BEM methodology

Organising Stylesheets and the BEM methodology

6a5681378ef043b9050ae1a38d689313?s=128

Benoît Burgener

November 04, 2014
Tweet

Transcript

  1. 6.
  2. 7.
  3. 8.
  4. 9.
  5. 10.
  6. 11.
  7. 12.

    Challenge the design Does it really worth it? Image source:

    http://brushfirecreative.com/from-designer-to-developer/
  8. 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"]
  9. 23.

    • Settings variables • Tools mixins, functions • Generic reset,

    normalize • Base body, h1, p, … • Objects .media, .tabs, .list, … • Status .is-active, .is-hidden, …
  10. 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
  11. 25.
  12. 26.

    Yandex « BEM is a methodology of web projects development,

    that allows you to divide an interface into logically independent blocks. »
  13. 28.
  14. 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>
  15. 31.

    The problems • Difficult to use with some CMS •

    Weird to couple with a framework like Bootstrap • Short list of resources
  16. 33.
  17. 34.

    block buttons flag images list-bare list-block list-inline list-ui media normalize

    pack print responsive spacing spacing-responsive tables tabs widths