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
Tweet

More Decks by Benoît Burgener

Other Decks in Programming

Transcript

  1. Organising stylesheets
    and the BEM methodology
    Benoît Burgener @LeBenLeBen WebMardi 4 nov. 2014 Liip LS

    View Slide

  2. Front-end environments
    becomes bigger every day

    View Slide

  3. There’s hundreds of devices using various browsers
    Image source: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

    View Slide

  4. We have to think and plan

    before coding

    View Slide

  5. Split into modules
    Review the designs to find patterns

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Challenge the design
    Does it really worth it?
    Image source: http://brushfirecreative.com/from-designer-to-developer/

    View Slide

  13. Not the content
    Describe the styling purpose

    View Slide



  14. John
    Doe

    John Doe

    View Slide



  15. John
    Doe

    John Doe

    View Slide

  16. Image source: http://www.stubbornella.org/content/2010/06/21/css-granularity-architecture/

    View Slide

  17. Reduce specificity
    Simplify selectors

    View Slide

  18. • CSS declarations precedence is a nightmare
    • Never style using IDs
    • If you really have to, use
    • Do not include in your declarations
    • Use classes!
    • And don’t nest them for god sake
    [id="#shame"]

    View Slide

  19. Name smartly
    Think reusable

    View Slide

  20. Too precise or too vague
    .button-red
    .box-bordered
    .strong
    .small
    .span-240px

    View Slide

  21. Good, reusable naming
    .button-primary
    .box-alt
    .button-strong
    .text-small
    .span-3

    View Slide

  22. Split the code
    The power of preprocessors

    View Slide

  23. • Settings variables
    • Tools mixins, functions
    • Generic reset, normalize
    • Base body, h1, p, …
    • Objects .media, .tabs, .list, …
    • Status .is-active, .is-hidden, …

    View Slide

  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

    View Slide

  25. B.E.M.

    View Slide

  26. Yandex
    « BEM is a methodology of web projects
    development, that allows you to divide an interface
    into logically independent blocks. »

    View Slide

  27. Block
    Element
    Modifier



    View Slide

  28. View Slide

  29. Click me

    View Slide






  30. Hello there


    View Slide

  31. The problems
    • Difficult to use with some CMS
    • Weird to couple with a framework like Bootstrap
    • Short list of resources

    View Slide

  32. Harry Roberts
    csswizardry.com
    @csswizardry

    View Slide

  33. « Inuit.css is a Sass based, Object Oriented
    framework built on a BEM-style naming
    convention. »

    View Slide

  34. block
    buttons
    flag
    images
    list-bare
    list-block
    list-inline
    list-ui
    media
    normalize
    pack
    print
    responsive
    spacing
    spacing-responsive
    tables
    tabs
    widths

    View Slide

  35. Questions?
    Or any experience you want to share?

    View Slide

  36. Thanks!
    @LeBenLeBen

    View Slide